使用html5 Canvas绘制线条(直线、折线等)-守望者-AIR技术交流

破晓发表于 2016-7-22 17:07:23

使用html5 Canvas绘制线条(直线、折线等)

<p class="note" style="margin-top: 1.2em; margin-bottom: 5px; padding: 10px; border: 1px solid rgb(230, 219, 85); outline: 0px; font-size: 13px; vertical-align: baseline; border-radius: 3px; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: none 0px 0px repeat scroll rgb(255, 255, 224);">本文来源：http://www.365mini.com/page/html5-canvas-draw-line.htm<p class="note" style="margin-top: 1.2em; margin-bottom: 5px; padding: 10px; border: 1px solid rgb(230, 219, 85); outline: 0px; font-size: 13px; vertical-align: baseline; border-radius: 3px; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: none 0px 0px repeat scroll rgb(255, 255, 224);">注意：本文属于《<a href="http://www.365mini.com/page/html5-canvas.htm" title="html5 Canvas绘制图形入门详解" style="color: rgb(102, 0, 153); text-decoration: none;">html5 Canvas绘制图形入门详解</a>》系列文章中的一部分。如果你是html5初学者，仅仅阅读本文，可能无法较深入的理解canvas，甚至无法顺畅地通读本文。请点击上述链接以了解使用html5 canvas绘制图形的完整内容。<p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">使用html5 Canvas绘制直线所需的<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">CanvasRenderingContext2D</code>对象的主要属性和方法(有"()"者为方法)如下：<table border="1" cellspacing="0" cellpadding="0" style="margin-top: 1.5em; margin-bottom: 1.5em; border: 1px solid rgb(128, 128, 128); outline: 0px; font-size: 13px; vertical-align: baseline; border-spacing: 0px; overflow-x: auto; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;"><tbody style="border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><tr class="firstRow" style="border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"><th width="165px" style="padding: 5px; border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128) rgb(128, 128, 128) rgb(132, 132, 132); outline: 0px; vertical-align: top; white-space: nowrap; background: transparent;">属性或方法</th><th style="padding: 5px; border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128) rgb(128, 128, 128) rgb(132, 132, 132); outline: 0px; vertical-align: top; white-space: nowrap; background: transparent;">基本描述</th></tr><tr style="border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">strokeStyle</td><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示css颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个<a href="http://www.365mini.com/page/html5-canvasgradient.htm" title="html5 CanvasGradient对象用法详解" style="color: rgb(102, 0, 153); text-decoration: none;">CanvasGradient</a>对象或者<a href="http://www.365mini.com/page/html5-canvaspattern.htm" title="html5 CanvasPattern对象用法详解" style="color: rgb(102, 0, 153); text-decoration: none;">CanvasPattern</a>对象</td></tr><tr style="border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">globalAlpha</td><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">定义绘制内容的透明度，取值在0.0(完全透明)和1.0(完全不透明)之间，默认值为1.0。</td></tr><tr style="border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">lineWidth</td><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">定义绘制线条的宽度。默认值是1.0，并且这个属性必须大于0.0。较宽的线条在路径上居中，每边各有线条宽的一半。</td></tr><tr style="border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">lineCap</td><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">指定线条两端的线帽如何绘制。合法的值是 "butt"、"round"和"square"。默认值是"butt"。你可以点击这里<a href="http://www.365mini.com/page/canvasrenderingcontext2d-linecap.htm" title="CanvasRenderingContext2D.lineCap属性用法及示例" style="color: rgb(102, 0, 153); text-decoration: none;">查看lineCap的具体示例</a>，以帮助你更好地理解<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">lineCap</code>。</td></tr><tr style="border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">beginPath()</td><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。它将重置内存中现有的路径。</td></tr><tr style="border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">moveTo(int x, int y)</td><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">移动画笔到指定的坐标点<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">(x,y)</code>，该点就是新的子路径的起始点</td></tr><tr style="border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">lineTo(int x, int y)</td><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">使用直线连接当前端点和指定的坐标点<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">(x,y)</code></td></tr><tr style="border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">stroke(int x, int y)</td><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">沿着绘制路径的坐标点顺序绘制直线</td></tr><tr style="border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">closePath()</td><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">如果当前的绘制路径是打开的，则关闭掉该绘制路径。此外，调用该方法时，它会尝试用直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭(比如先调用了stroke())或者只有一个点，它会什么都不做。</td></tr></tbody></table><p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">在Canvas的图形绘制过程中，几乎都是先按照一定顺序先定下几个坐标点，也就是所谓的绘制路径，然后再根据我们的需要将这些坐标点用指定的方式连接起来，就形成了我们所需要的图形。当我们了解了<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">CanvasRenderingContext2D</code>对象的上述API后，那么绘制线条就显得非常简单了。<h3 style="margin-top: 1em; margin-bottom: 1em; border-width: 0px 0px 1px; border-bottom-style: solid; border-bottom-color: rgb(170, 170, 170); outline: 0px; font-size: 20px; vertical-align: baseline; font-weight: normal; font-stretch: normal; line-height: 1.5; font-family: "Courier New", SimSun; color: rgb(0, 0, 204); background: transparent;">使用canvas绘制基本的直线</h3><p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">现在，我们就使用canvas来绘制最基本的直线。<pre class="prettyprint linenums" style="margin-bottom: 20px; padding: 10px; border: 1px solid rgb(153, 153, 153); outline: 0px; font-size: 12px; vertical-align: baseline; word-break: break-all; overflow: auto; position: relative; color: rgb(51, 51, 51); font-stretch: normal; line-height: 1.5; font-family: "Courier New", Consola, SimSun; border-radius: 8px; box-shadow: rgb(153, 153, 153) 0px 2px 4px; background: rgb(247, 247, 247);"><ol class="linenums" style="margin-right: 2.2em; margin-left: 2.2em; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><!DOCTYPE html> </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"><html> </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><head> </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"><meta charset="UTF-8"> </li><li class="L4" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><title>HTML5 Canvas绘制线条入门示例</title> </li><li class="L5" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"></head> </li><li class="L6" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><body> </li><li class="L7" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"> </li><li class="L8" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"> </li><li class="L9" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"><canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;"> </li><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">您的浏览器不支持canvas标签。 </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"></canvas> </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"> </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"><script type="text/javascript"> </li><li class="L4" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">//获取Canvas对象(画布) </li><li class="L5" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">var canvas = document.getElementById("myCanvas"); </li><li class="L6" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误 </li><li class="L7" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">if(canvas.getContext){   </li><li class="L8" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    //获取对应的CanvasRenderingContext2D对象(画笔) </li><li class="L9" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    var ctx = canvas.getContext("2d"); </li><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    //注意，Canvas的坐标系是：Canvas画布的左上角为原点(0,0)，向右为横坐标，向下为纵坐标，单位是像素(px)。 </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    //开始一个新的绘制路径 </li><li class="L4" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    ctx.beginPath(); </li><li class="L5" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    //定义直线的起点坐标为(10,10) </li><li class="L6" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    ctx.moveTo(10, 10); </li><li class="L7" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    //定义直线的终点坐标为(50,10) </li><li class="L8" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    ctx.lineTo(50, 10); </li><li class="L9" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    //沿着坐标点顺序的路径绘制直线 </li><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    ctx.stroke(); </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    //关闭当前的绘制路径 </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    ctx.closePath(); </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">} </li><li class="L4" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"></script> </li><li class="L5" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"></body> </li><li class="L6" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"></html></li></ol></pre><p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">显示效果如下：<a class="run" href="http://www.365mini.com/diy.php?f=html5-canvas-draw-line-demo-1" target="_blank" title="运行代码" style="color: rgb(255, 255, 255); text-decoration: none; border-radius: 5px; box-shadow: rgba(255, 255, 255, 0.498039) 0px 1px 0px inset, rgba(0, 0, 0, 0.2) 0px 1px 0px; text-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px; cursor: pointer; display: inline-block; font-size: 12px; text-align: center; vertical-align: middle; white-space: nowrap; border: 1px solid rgb(4, 91, 178); padding: 0.3em 0.8em !important; background: rgb(14, 120, 231) !important;">运行代码</a><p class="img-box" style="margin-top: 1.2em; margin-bottom: 1.3em; padding-top: 5px; border: 1px solid rgb(204, 204, 204); outline: 0px; font-size: 13px; vertical-align: baseline; text-align: center; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; width: 483px; background: transparent;"><a class="fancybox" rel="gallery" href="http://codeplayer.qiniudn.com/canvas-line-1.png" title="使用canvas绘制最基本的直线" style="color: rgb(102, 0, 153); text-decoration: none; background: none !important;"><img src="http://codeplayer.qiniudn.com/canvas-line-1.png" data-original="http://codeplayer.qiniudn.com/canvas-line-1.png" class="lazy" width="473" height="319" alt="使用canvas绘制最基本的直线" title="使用canvas绘制最基本的直线" _show_text="true" style="border-width: 0px; border-style: initial; outline: 0px; vertical-align: baseline; max-width: 100%; height: auto; overflow: hidden; display: inline; background: transparent;"></a>使用canvas绘制最基本的直线<h3 style="margin-top: 1em; margin-bottom: 1em; border-width: 0px 0px 1px; border-bottom-style: solid; border-bottom-color: rgb(170, 170, 170); outline: 0px; font-size: 20px; vertical-align: baseline; font-weight: normal; font-stretch: normal; line-height: 1.5; font-family: "Courier New", SimSun; color: rgb(0, 0, 204); background: transparent;">使用canvas绘制带颜色的直线</h3><p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">大家都知道，在现实世界中，画笔也是多种多样的，并且具有各种不同的颜色。同样的，Canvas的画笔<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">CanvasRenderingContext2D</code>对象也同样可以具有你所需要的各种颜色。在上面的代码示例中，我们没有指定颜色的话，Canvas的画笔就默认为最常见的黑色。<p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">现在我们再次使用Canvas的画笔绘制一条蓝色的直线(基于页面简洁考虑，下面只给出关键的JavaScript代码，请同时参考上面完整的代码示例)。<pre class="prettyprint linenums" style="margin-bottom: 20px; padding: 10px; border: 1px solid rgb(153, 153, 153); outline: 0px; font-size: 12px; vertical-align: baseline; word-break: break-all; overflow: auto; position: relative; color: rgb(51, 51, 51); font-stretch: normal; line-height: 1.5; font-family: "Courier New", Consola, SimSun; border-radius: 8px; box-shadow: rgb(153, 153, 153) 0px 2px 4px; background: rgb(247, 247, 247);"><ol class="linenums" style="margin-right: 2.2em; margin-left: 2.2em; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><!DOCTYPE html> </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"><html> </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><head> </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"><meta charset="UTF-8"> </li><li class="L4" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><title>HTML5 Canvas绘制线条入门示例</title> </li><li class="L5" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"></head> </li><li class="L6" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><body> </li><li class="L7" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"> </li><li class="L8" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"> </li><li class="L9" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"><canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;"> </li><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">您的浏览器不支持canvas标签。 </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"></canvas> </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"> </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"><script type="text/javascript"> </li><li class="L4" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">//获取Canvas对象(画布) </li><li class="L5" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">var canvas = document.getElementById("myCanvas"); </li><li class="L6" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误 </li><li class="L7" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">if(canvas.getContext){   </li><li class="L8" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    //获取对应的CanvasRenderingContext2D对象(画笔) </li><li class="L9" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    var ctx = canvas.getContext("2d");   </li><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    //开始一个新的绘制路径 </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    ctx.beginPath(); </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    //定义直线的起点坐标为(10,10) </li><li class="L4" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    ctx.moveTo(10, 10); </li><li class="L5" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    //定义直线的终点坐标为(50,10) </li><li class="L6" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    ctx.lineTo(50, 10); </li><li class="L7" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    //沿着坐标点顺序的路径绘制直线 </li><li class="L8" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    ctx.stroke(); </li><li class="L9" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    //关闭当前的绘制路径 </li><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    ctx.closePath(); </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"> </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    //绘制一条带颜色的直线 </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    ctx.moveTo(10, 30); </li><li class="L4" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    ctx.lineTo(50, 30); </li><li class="L5" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    //支持css颜色值的各种表现形式，例如："blue"、"#0000ff"、"#00f"、"rgb(0,0,255)"、"rgba(0,0,255,1)" </li><li class="L6" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    //颜色等各种设置，必须在最终的绘制函数stroke()之前调用 </li><li class="L7" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    ctx.strokeStyle = "blue"; </li><li class="L8" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    ctx.stroke(); </li><li class="L9" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    //关闭当前的绘制路径 </li><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    ctx.closePath(); </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">} </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"></script> </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"></body> </li><li class="L4" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"></html></li></ol></pre><p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">对应的显示效果如下图：<a class="run" href="http://www.365mini.com/diy.php?f=html5-canvas-draw-line-demo-2" target="_blank" title="运行代码" style="color: rgb(255, 255, 255); text-decoration: none; border-radius: 5px; box-shadow: rgba(255, 255, 255, 0.498039) 0px 1px 0px inset, rgba(0, 0, 0, 0.2) 0px 1px 0px; text-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px; cursor: pointer; display: inline-block; font-size: 12px; text-align: center; vertical-align: middle; white-space: nowrap; border: 1px solid rgb(4, 91, 178); padding: 0.3em 0.8em !important; background: rgb(14, 120, 231) !important;">运行代码</a><p class="img-box" style="margin-top: 1.2em; margin-bottom: 1.3em; padding-top: 5px; border: 1px solid rgb(204, 204, 204); outline: 0px; font-size: 13px; vertical-align: baseline; text-align: center; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; width: 437px; background: transparent;"><a class="fancybox" rel="gallery" href="http://codeplayer.qiniudn.com/canvas-blue-line.png" title="使用canvas绘制的蓝色直线" style="color: rgb(102, 0, 153); text-decoration: none; background: none !important;"><img src="http://codeplayer.qiniudn.com/canvas-blue-line.png" data-original="http://codeplayer.qiniudn.com/canvas-blue-line.png" class="lazy" width="427" height="316" alt="使用canvas绘制的蓝色直线" title="使用canvas绘制的蓝色直线" _show_text="true" style="border-width: 0px; border-style: initial; outline: 0px; vertical-align: baseline; max-width: 100%; height: auto; overflow: hidden; display: inline; background: transparent;"></a>使用canvas绘制的蓝色直线<h3 style="margin-top: 1em; margin-bottom: 1em; border-width: 0px 0px 1px; border-bottom-style: solid; border-bottom-color: rgb(170, 170, 170); outline: 0px; font-size: 20px; vertical-align: baseline; font-weight: normal; font-stretch: normal; line-height: 1.5; font-family: "Courier New", SimSun; color: rgb(0, 0, 204); background: transparent;">使用canvas绘制基本的折线</h3><p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">当我们掌握了Canvas绘制直线之后，绘制折线等其他形式的线条就简单多了。我们只需要多绘制几个路径中间点，并依次将它们连接起来即可。<pre class="prettyprint linenums" style="margin-bottom: 20px; padding: 10px; border: 1px solid rgb(153, 153, 153); outline: 0px; font-size: 12px; vertical-align: baseline; word-break: break-all; overflow: auto; position: relative; color: rgb(51, 51, 51); font-stretch: normal; line-height: 1.5; font-family: "Courier New", Consola, SimSun; border-radius: 8px; box-shadow: rgb(153, 153, 153) 0px 2px 4px; background: rgb(247, 247, 247);"><ol class="linenums" style="margin-right: 2.2em; margin-left: 2.2em; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><script type="text/javascript"> </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">//获取Canvas对象(画布) </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">var canvas = document.getElementById("myCanvas"); </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误 </li><li class="L4" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">if(canvas.getContext){   </li><li class="L5" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    //获取对应的CanvasRenderingContext2D对象(画笔) </li><li class="L6" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    var ctx = canvas.getContext("2d");   </li><li class="L7" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    </li><li class="L8" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    //开始一个新的绘制路径 </li><li class="L9" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    ctx.beginPath(); </li><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    //设置线条颜色为蓝色 </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    ctx.strokeStyle = "blue"; </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    //设置路径起点坐标 </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    ctx.moveTo(20, 50); </li><li class="L4" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    //定义中间点坐标1 </li><li class="L5" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    ctx.lineTo(60, 50); </li><li class="L6" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    //定义中间点坐标2 </li><li class="L7" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    ctx.lineTo(60, 90); </li><li class="L8" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    //定义中间点坐标3(这是最后一个中间点，也就是终点) </li><li class="L9" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    ctx.lineTo(100, 90); </li><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    //按照绘制路径顺序连接各个坐标点 </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    ctx.stroke(); </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    //关闭绘制路径 </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    ctx.closePath(); </li><li class="L4" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">} </li><li class="L5" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"></script></li></ol></pre><p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">对应的显示效果如下图：<a class="run" href="http://www.365mini.com/diy.php?f=html5-canvas-draw-line-demo-3" target="_blank" title="运行代码" style="color: rgb(255, 255, 255); text-decoration: none; border-radius: 5px; box-shadow: rgba(255, 255, 255, 0.498039) 0px 1px 0px inset, rgba(0, 0, 0, 0.2) 0px 1px 0px; text-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px; cursor: pointer; display: inline-block; font-size: 12px; text-align: center; vertical-align: middle; white-space: nowrap; border: 1px solid rgb(4, 91, 178); padding: 0.3em 0.8em !important; background: rgb(14, 120, 231) !important;">运行代码</a><p class="img-box" style="margin-top: 1.2em; margin-bottom: 1.3em; padding-top: 5px; border: 1px solid rgb(204, 204, 204); outline: 0px; font-size: 13px; vertical-align: baseline; text-align: center; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; width: 434px; background: transparent;"><a class="fancybox" rel="gallery" href="http://codeplayer.qiniudn.com/canvas-blue-broken-line.png" title="使用Canvas绘制的折线效果" style="color: rgb(102, 0, 153); text-decoration: none; background: none !important;"><img src="http://codeplayer.qiniudn.com/canvas-blue-broken-line.png" data-original="http://codeplayer.qiniudn.com/canvas-blue-broken-line.png" class="lazy" width="424" height="315" alt="使用Canvas绘制的折线效果" title="使用Canvas绘制的折线效果" _show_text="true" style="border-width: 0px; border-style: initial; outline: 0px; vertical-align: baseline; max-width: 100%; height: auto; overflow: hidden; display: inline; background: transparent;"></a>使用Canvas绘制的折线效果<p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">掌握上述内容后，相信大家对使用Canvas绘制线条有一些基本的了解了吧。由于对线条的宽度、透明度等控制只是设置单个属性即可，请参考上面的相关API，这里就不再赘述了。<p class="note" style="margin-top: 1.2em; margin-bottom: 5px; padding: 10px; border: 1px solid rgb(230, 219, 85); outline: 0px; font-size: 13px; vertical-align: baseline; border-radius: 3px; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: none 0px 0px repeat scroll rgb(255, 255, 224);">强烈注意：在绘制图形路径时，一定要先调用<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">beginPath()</code>。<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">beginPath()</code>方法将会清空内存中之前的绘制路径信息。如果不这样做，对于绘制单个图形可能没什么影响，但是在绘制多个图形时(例如上面示例的两条直线)，将会导致路径绘制或者颜色填充等操作出现任何意料之外的结果。<p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">此外，对于<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">closePath()</code>方法，初学者一定要稍加注意，尤其是上面API表格中<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">closePath()</code>方法描述中的红色文字。在上面绘制折线的代码示例中，我们先调用了<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">stroke()</code>，再调用了<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">closePath()</code>。其实在调用<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">stroke()</code>方法时，折线就已经绘制好了，当前的绘制路径也就被关闭掉了，所以再调用<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">closePath()</code>方法时，它就不会使用直线连接当前端点和起始端点(也就是说，这里的<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">closePath()</code>是可有可无的，不过为了保持良好的习惯，还是建议写上)。如果我们交换一下<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">stroke()</code>和<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">closePath()</code>的调用顺序，则情况完全不一样了。由于<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">closePath()</code>先调用，此时绘制路径并没有关闭，那么<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">closePath()</code>将会用直线连接当前端点和起始端点。<p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">交换<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">stroke()</code>和<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">closePath()</code>调用顺序后的示例代码如下：<pre class="prettyprint linenums" style="margin-bottom: 20px; padding: 10px; border: 1px solid rgb(153, 153, 153); outline: 0px; font-size: 12px; vertical-align: baseline; word-break: break-all; overflow: auto; position: relative; color: rgb(51, 51, 51); font-stretch: normal; line-height: 1.5; font-family: "Courier New", Consola, SimSun; border-radius: 8px; box-shadow: rgb(153, 153, 153) 0px 2px 4px; background: rgb(247, 247, 247);"><ol class="linenums" style="margin-right: 2.2em; margin-left: 2.2em; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><script type="text/javascript"> </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">//获取Canvas对象(画布) </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">var canvas = document.getElementById("myCanvas"); </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误 </li><li class="L4" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">if(canvas.getContext){   </li><li class="L5" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    //获取对应的CanvasRenderingContext2D对象(画笔) </li><li class="L6" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    var ctx = canvas.getContext("2d");   </li><li class="L7" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    </li><li class="L8" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    //开始一个新的绘制路径 </li><li class="L9" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    ctx.beginPath(); </li><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    //设置线条颜色为蓝色 </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    ctx.strokeStyle = "blue"; </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    //设置路径起点坐标 </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    ctx.moveTo(20, 50); </li><li class="L4" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    //定义中间点坐标1 </li><li class="L5" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    ctx.lineTo(60, 50); </li><li class="L6" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    //定义中间点坐标2 </li><li class="L7" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    ctx.lineTo(60, 90); </li><li class="L8" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    //定义中间点坐标3(这是最后一个中间点，也就是终点) </li><li class="L9" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    ctx.lineTo(100, 90); </li><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    //先关闭绘制路径。注意，此时将会使用直线连接当前端点和起始端点。 </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    ctx.closePath(); </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    //最后，按照绘制路径顺序连接各个坐标点 </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    ctx.stroke(); </li><li class="L4" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">} </li><li class="L5" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"></script></li></ol></pre><p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">交换调用顺序后，对应的显示效果如下：<a class="run" href="http://www.365mini.com/diy.php?f=html5-canvas-draw-line-demo-4" target="_blank" title="运行代码" style="color: rgb(255, 255, 255); text-decoration: none; border-radius: 5px; box-shadow: rgba(255, 255, 255, 0.498039) 0px 1px 0px inset, rgba(0, 0, 0, 0.2) 0px 1px 0px; text-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px; cursor: pointer; display: inline-block; font-size: 12px; text-align: center; vertical-align: middle; white-space: nowrap; border: 1px solid rgb(4, 91, 178); padding: 0.3em 0.8em !important; background: rgb(14, 120, 231) !important;">运行代码</a><p class="img-box" style="margin-top: 1.2em; margin-bottom: 1.3em; padding-top: 5px; border: 1px solid rgb(204, 204, 204); outline: 0px; font-size: 13px; vertical-align: baseline; text-align: center; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; width: 443px; background: transparent;"><a class="fancybox" rel="gallery" href="http://codeplayer.qiniudn.com/canvas-blue-broken-line-2.png" title="交换调用顺序后的canvas绘制效果" style="color: rgb(102, 0, 153); text-decoration: none; background: none !important;"><img src="http://codeplayer.qiniudn.com/canvas-blue-broken-line-2.png" data-original="http://codeplayer.qiniudn.com/canvas-blue-broken-line-2.png" class="lazy" width="433" height="314" alt="交换调用顺序后的canvas绘制效果" title="交换调用顺序后的canvas绘制效果" _show_text="true" style="border-width: 0px; border-style: initial; outline: 0px; vertical-align: baseline; max-width: 100%; height: auto; overflow: hidden; display: inline; background: transparent;"></a>交换调用顺序后的canvas绘制效果

页: [1]

守望者--AIR技术交流's Archiver

使用html5 Canvas绘制线条(直线、折线等)