html5Canvas实现画直线与设定线条的样式-
在学画画的时候，线条是最根本的了，而线条的连贯可以组成任何图形。在Canvas中也是如此,接下来为您细致介绍最简略的线条的画法
要是你还不晓得Canvas有哪些，可以看看上一篇.
在学画画的时候，线条是最根本的了，而线条的连贯可以组成任何图形。在Canvas中也是如此。
在开端以前我们先拿出画布和画笔：
var cvs = document.getElementById('cvs'); //画布
var ctx = cvs.getContext('2d'); // 画笔我们画画的时候，降笔点是不牢固的，随时都会变。canvas虽然不是通过手来决议降笔点，但也有一个办法,就是moveTo。moveTo的作用相当于把笔尖提离画布，然后挪移到指定的点（即坐标）。
ctx.moveTo(x,y)
此历程中不会画出任何图形，相当于你提着笔在画布上晃来晃去。
但晃来晃去是没用的，我们必需开端画。先画最简略的：直线
画直线的办法即lineTo，他的参数和moveTo同样的，都是一个点。
ctx.lineTo(x,y)固然，你画线的时候，降笔点也跟着挪移了，所以lineTo之后降笔点就酿成了他的指标点了。
ctx.moveTo(100,100); ctx.lineTo(200,100);
此时你刷新网页，会发明画布上没有预想中的线，什么也没有。由于我们还少了一个步骤.lineTo其实是画的一条“途径”，自身是不成见的。要是要让他显示出来，我们必需对他进行“画”的操纵。
用过PS的同窗，确定能晓得图形的两种模式，一种是添补，另一种是描边。此刻我们已经画了一条线，相当于PS中勾了一条途径，此时给途径描一下边，就能显示出图形了。
canvas描边的办法是stroke().此刻让我们把代码补全：
ctx.moveTo(100,100); ctx.lineTo(200,100);
ctx.stroke();此时刷新，就能看到一条线了。固然，你也可以陆续绘制出几百条途径，再施行描边行动，即可一下画出几百条线。此刻我们来用4条线画一个矩形：
ctx.moveTo(100,100); ctx.lineTo(200,100); ctx.lineTo(200,200); ctx.lineTo(100,200); ctx.lineTo(100,100); ctx.stroke();
这里我们就是先绘出全部途径，再一次性描边。
——–作者的埋怨：Canvas画图有个欠好的地方就是：根本靠猜，很不直不雅。
重大提醒：canvas的画图历程（即添补与描边）是非常耗损资源的，要是想节俭系统资源提高效率，最佳是绘制好所有途径，再一次性添补或描边图形。
由上面的图形我们可以看出，默许的线条粗细是1px，而线条色彩是玄色。固然我们可以设定他们,但蹊跷怪僻的是设定线条宽度是lineWidth，而设定线条样式的却叫strokeStyle，为何不是lineStyle呢？我也不晓得。：
ctx.lineWidth = 10; ctx.strokeStyle = 'rgba(255,0,0,0.5)';
上面的代码把线条宽度设定成了10px，线条色彩酿成了半透亮的红色。
那是由于，我画线的历程中没有把画笔“提起来”，画笔是陆续的，即没有moveTo过。不信我们此刻来moveTo一下：
ctx.moveTo(100,100); ctx.lineTo(200,100); ctx.moveTo(200,100); //注意这里 ctx.lineTo(200,200); ctx.lineTo(100,200); ctx.lineTo(100,100); ctx.lineWidth = 10; ctx.strokeStyle = 'rgba(255,0,0,0.5)'; ctx.stroke();
我们再画第二条线以前moveTo了一下，并且moveTo连坐标都没变，还是阿谁点，但刷新后图形酿成了这个模样[图3]：
Canvas怎么闭合途径？用closePath().
ctx.moveTo(100,100); ctx.lineTo(200,100); ctx.lineTo(200,200); ctx.lineTo(100,200); ctx.lineTo(100,100); ctx.closePath();//闭合途径 ctx.lineWidth = 10; ctx.strokeStyle = 'rgba(255,0,0,0.5)'; ctx.stroke();
此时刷新，就是一个完善的正方形了。图4：
以上就是html5 Canvas实现画直线与设定线条的样式的细致内容，更多请关注 百分百源码网 其它相干文章！
