HTML5canvas基本绘图之绘制线条.pdfVIP

lt;canvasgt;lt;/canvasgt; 是 HTML5 中新增的标签，用于绘制图形，这篇文章主要 为大家详细介绍了 HTML5 canvas 基本绘图之绘制线条方法， 感兴趣的小伙伴们可以参考一 下 lt;canvasgt;lt;/canvasgt; 是 HTML5 中新增的标签，用于绘制图形，实际上，这个 标签和其他的标签一样， 其特殊之处在于该标签可以获取一个 CanvasRenderingContext2D 对 象，我们可以通过 JavaScript 脚本来控制该对象进行绘图。 lt;canvasgt;lt;/canvasgt; 只是一个绘制图形的容器， 除了 id 、class、style 等属性外， 还有 height 和 width 属性。在 lt;canvasgt;gt; 元素上绘图主要有三步： 1.获取 lt;canvasgt; 元素对应的 DOM 对象，这是一个 Canvas 对象； 2.调用 Canvas 对象的 getContext() 方法，得到一个 CanvasRenderingContext2D 对象； 3.调用 CanvasRenderingContext2D 对象进行绘图。 线条属性 除了上面用到的 lineWidth 属性，线条还有以下几个属性： nbsp;#8226;lineCap 属性设置或返回线条末端线帽的样式，可以取以下几个值： nbsp; “butt” 向线条的每个末端添加平直的边缘（默认） ； nbsp; “round ” 向线条的每个末端添加圆形线帽； nbsp; “square” 向线条的每个末端添加正方形线帽。 nbsp;#8226;lineJoin 属性当两条线交汇时设置或返回所创建边角的类型，可以取以 下几个值： nbsp; “miter ” 创建尖角 (默认 ) ；nbsp; “bevel” 创建斜角； nbsp; “round ” 创建圆角。 nbsp;#8226;miterLimit 属性设置或返回最大斜接长度（默认为 10）。斜接长度指的 是在两条线交汇处内角和外角之间的距离。 只有当 lineJoin 属性为 “miter ” 时，miterLimit 才有效。 nbsp; JavaScript Code 复制内容到剪贴板 var canvas = document.getElementById(canvas); nbsp;nbsp; nbsp; nbsp; var context = canvas.getContext(2d); nbsp;nbsp; nbsp; nbsp; // 测试 lineCap 属性 nbsp;nbsp; nbsp; nbsp; // 设置基准线便于观察 nbsp;nbsp; nbsp; nbsp; context.moveTo(10,10); nbsp;nbsp; nbsp; nbsp; context.lineTo(10,200); nbsp;nbsp; nbsp; nbsp; context.moveTo(200,10); nbsp;nbsp; nbsp; nbsp; context.lineTo(200,200); nbsp;nbsp; nbsp; nbsp; context.lineWidth=1; nbsp;nbsp; nbsp; nbsp; context.stroke(); nbsp;nbsp; nbsp; nbsp; //butt nbsp;nbsp; nbsp; nbsp; context.beginPath(); nbsp;nbsp; nbsp; nbsp; context.moveTo(10,50); nbsp;nbsp; nbsp; nbsp; context.lineTo(200,50); nbsp;