html5Canvas实现画直线与设置线条的样式-

在学画画的时候，线条是最基本的了，而线条的连接可以组成任何图形。在Canvas中也是如此,接下来为您详细介绍最简单的线条的画法 如果你还不知道Canvas是什么，可以看看上一篇.
在学画画的时候，线条是最基本的了，而线条的连接可以组成任何图形。在Canvas中也是如此。
在开始之前我们先拿出画布和画笔：

var cvs = document.getElementById(&＃39;cvs&＃39;); //画布 
var ctx = cvs.getContext(&＃39;2d&＃39;); // 画笔

我们画画的时候，落笔点是不固定的，随时都会变。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 = &＃39;rgba(255,0,0,0.5)&＃39;;

上面的代码把线条宽度设置成了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 = &＃39;rgba(255,0,0,0.5)&＃39;; 
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 = &＃39;rgba(255,0,0,0.5)&＃39;; 
ctx.stroke();

此时刷新，就是一个完美的正方形了。图4：

以上就是html5 Canvas实现画直线与设置线条的样式的详细内容，更多请关注 第一PHP社区 其它相关文章！