canvas学习总结三：绘制路径-线段，canvas线段

Canvas绘图环境中有些属于立即绘制图形方法，有些绘图方法是基于路径的。

立即绘制图形方法仅有两个strokeRect(),fillRect(),虽然strokezText(),fillText()方法也是立即绘制的，但是文本不算是图形。

基于路径的绘制系统
大多数绘制系统，如：SVG(Scalable Verctor Graphics, 可缩放的矢量图形)，Adobe Illustrator等，都是基于路径的，

使用这些绘制系统时，你需要先定义一个路径，然后再对其进行描边或填充，也可以描边加填充这样图形才能显示出来。

Canvas中的三种绘制方式：

 

绘制一条线段

 

Canvas绘图环境中，线段也是基于路径绘制的，称为线性路径，创建线性路径的方法：moveTO()与lineTo()，在创建路径之后调用stroke()方法，才能在Canvas中画出线段出来。

这就是前面我们所说的基于路径的绘制方法，必须对其进行描边或者填充；

通常两点连一线因此绘制线段非常简单，通过moveTO()指定线的起点，通过lineTo()移动到另一个点。

function drawLine(){ cxt.moveTo(50, 50); cxt.lineTo(100, 100); }

然而这样我们在画布中是看不见线段的，前面我们说到基于路径的绘制方法，必须要描边或者填充。所以要想看到结果，我们必须还要使用stroke()方法。

因此我们把方法修改成下面这样就会绘制出一条线段

function drawLine(){ cxt.moveTo(50, 50); cxt.lineTo(200, 200); cxt.stroke(); }

我们只使用lineTo()也是能在画布中绘制出线段的，我们把上面的代码改成如下面所示，效果也是一样的

function drawLine(){ cxt.lineTo(50, 50); cxt.lineTo(200, 200); cxt.stroke(); }

总结下moveTo()与lineTo()的用法

moveTo(x,y): 将笔触移动到指定的坐标x以及y上，向当前路径中增加一条子路径，该方法不会清除当前路径中的任何子路径。

lineTo(x,y): 绘制一条从当前位置到指定x以及y位置的直线，如果当前路径中没有子路径，那么这个方法的行为与moveTo()一样。如果当前路径中存在子路径，此方法会将你所指定的这个点加入子路径中。

改变线段的样式

改变线段的宽度

 

function= 14; cxt.lineTo(50, 50); cxt.lineTo(200, 200); cxt.stroke(); }

 

改变线段的颜色

function drawLine(){ cxt.lineWidth = 14; cxt.strokeStyle = 'green'; cxt.lineTo(50, 50); cxt.lineTo(200, 200); cxt.stroke(); }

 

我们还可以利用CanvasGradient对象或者CanvasPattern对象给线段添加渐变色或图案

function drawLine(){ cxt.lineWidth = 14; var gradient = cxt.createLinearGradient(0, 0, canvas.width/2, canvas.height/2); gradient.addColorStop(0, 'blue'); gradient.addColorStop(0.5, 'purple'); gradient.addColorStop(1, 'yellow'); cxt.strokeStyle = gradient; cxt.lineTo(50, 50); cxt.lineTo(200, 200); cxt.stroke(); }

 

beginPath()与closePath()

从上面canvas中的三种绘制方式中我们可以看出，第二行的弧形路径是开放路径，最后一行的弧形是封闭路径。那么封闭的路径是怎么实现的呢？

下面我们来看看canvas中路径绘制中两个比较重要的方法

beginPath(): 清除当前所有子路径，以此来重置当前路径，重新规划一条路径。

closePath(): 用于封闭某段开放路径。不是必需的，如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。

先绘制出一条折线

function drawLine(){ cxt.strokeStyle = 'green'; cxt.lineWidth = 2; cxt.moveTo(50, 50); cxt.lineTo(50, 150); cxt.lineTo(150, 150); cxt.stroke(); }

修改上面例子中的代码在代码中添加beginPath()与closePath()方法

function drawLine(){ //描边三角形 cxt.strokeStyle = 'green'; cxt.lineWidth = 2; cxt.beginPath(); cxt.moveTo(50, 50); cxt.lineTo(50, 150); cxt.stroke(); cxt.beginPath(); cxt.lineTo(150, 150); cxt.lineTo(150, 250); cxt.stroke();
　　cxt.closePath(); }

可以看出我们在画布中绘制了两条路径

注意：调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo（）。所以我们在绘制图形的时候一定要先使用beginPath()。