Canvas画各种线
在Canvas中绘制路径,最好加上beginPath()和closePath()。 结合lineTo()绘制不同的路径
closePath()方法创建从当前点到开始点的路径。 提示:请使用 stroke() 方法在画布上绘制确切的路径。 提示:请使用 fill() 方法来填充图像(默认是黑色)。请使用 fillStyle 属性来填充另一个颜色/渐变。 注意:Internet Explorer 8 及之前的版本不支持 <canvas> 元素。 beginPath() 方法开始一条路径,或重置当前的路径。 提示:请使用这些方法来创建路径 moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 和 arc()。 提示:请使用 stroke() 方法在画布上绘制确切的路径。
画渐变直线
-
var canvasGradient = ctx.createLinearGradient( 20, 20, 200, 20);
-
//在offset为0的位置(即起点位置)添加一个蓝色的渐变
-
canvasGradient.addColorStop( 0, "yellow");
-
//在offset为0.2的位置(线段左起50%的位置)添加一个绿色的渐变
-
canvasGradient.addColorStop( 0.5, "blue");
-
//在offset为0的位置(即终点位置)添加一个红色的渐变
-
canvasGradient.addColorStop( 1, "red");
-
//将strokeStyle的属性值设为该CanvasGradient对象
-
ctx.strokeStyle = canvasGradient;
-
ctx.lineWidth = 10;
-
ctx.moveTo( 20, 20);
-
ctx.lineTo( 200, 20);
-
ctx.stroke();
-
ctx.beginPath();
-
var canvasGradient01 = ctx.createLinearGradient( 20, 50, 200, 20);
-
canvasGradient01.addColorStop( 0, "red");
-
canvasGradient01.addColorStop( 1, "yellow");
-
ctx.strokeStyle = canvasGradient01;
-
ctx.lineWidth = 10;
-
ctx.moveTo( 20, 50);
-
ctx.lineTo( 200, 50);
-
ctx.stroke();
画折线
在绘制图形路径时,一定要先调用beginPath()方法。beginPath()方法将会清空内存中之前的绘制路径信息。
如果,先调用storke()方法,再调用closePath方法时。在调用storke方法时,折线一画好,紧接着调用closePath方法,关闭当前路径;
如果,先调用closePath()方法,再调用storke方法时。在调用closePath方法时,当前路径没有关闭,该方法将会用直线连接当前点和起始点;
-
ctx.beginPath();
-
ctx.moveTo( 20, 20);
-
ctx.lineTo( 50, 20);
-
ctx.lineTo( 50, 100);
-
ctx.lineTo( 100, 100);
-
ctx.stroke();
-
ctx.closePath();
-
-
ctx.beginPath();
-
ctx.moveTo( 120, 20);
-
ctx.lineTo( 150, 20);
-
ctx.lineTo( 150, 100);
-
ctx.lineTo( 200, 100);
-
ctx.closePath();
-
ctx.stroke();
-
ctx.closePath();
-
-
ctx.beginPath();
-
ctx.moveTo( 220, 20);
-
ctx.lineTo( 250, 20);
-
ctx.stroke();
-
ctx.closePath();
-
ctx.beginPath();
-
ctx.lineTo( 250, 100);
-
ctx.lineTo( 300, 100);
-
ctx.stroke();
-
ctx.closePath();
画实心线
fill方法,会把路径填充成一个图形。
画网格
Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 lineJoin 属性。
注意:Internet Explorer 8 及之前的版本不支持 <canvas> 元素。