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

改变线段的颜色

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()。

我们继续修改我们的代码

function drawLine(){
//描边三角形								 
 2/4   首页 上一页 1 2 3 4 下一页 尾页