); ); ctx.lineWidth=10; ctx.beginPath(); ctx.lineCap; ctx.moveTo(); ctx.lineTo(); ctx.strokeStyle; ctx.stroke(); ctx.beginPath(); ctx.lineCap; ctx.moveTo(); ctx.lineTo(); ctx.strokeStyle; ctx.stroke(); ctx.beginPath(); ctx.lineCap; ctx.moveTo(); ctx.lineTo(); ctx.strokeStyle; ctx.stroke();

代码效果如下：

光看此图可能看不太出“butt”和"square"的区别，但懂得使用AI绘制矢量的同学们应该比较了解：

⑵ lineJoin则是设定折线的交接处的外角类型，其值可为：

miter    默认，折线交接处为尖角

round   折线交接处为圆角

bevel   折线交接处为斜角

); ); ctx.lineWidth=13; ctx.lineJoin; ctx.moveTo(); ctx.lineTo(); ctx.lineTo(); ctx.strokeStyle; ctx.stroke(); ctx.beginPath(); ctx.lineJoin; ctx.moveTo(); ctx.lineTo(); ctx.lineTo(); ctx.strokeStyle; ctx.stroke(); ctx.beginPath(); ctx.lineJoin; ctx.moveTo(); ctx.lineTo(); ctx.lineTo(); ctx.strokeStyle; ctx.stroke();

效果如下：

开篇就先讲到这里，主要是对canvas线段绘制功能的介绍，共勉~

HTML5- Canvas入门（一）,布布扣,bubuko.com

HTML5- Canvas入门（一）

标签：class   style   代码   html   src   问题   使用   方法