Canvas画各种线

Canvas画各种线

阅读数：562

在Canvas中绘制路径，最好加上beginPath()和closePath()。 结合lineTo()绘制不同的路径

closePath()方法创建从当前点到开始点的路径。
提示：请使用 stroke() 方法在画布上绘制确切的路径。
提示：请使用 fill() 方法来填充图像（默认是黑色）。请使用 fillStyle 属性来填充另一个颜色/渐变。
注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。
beginPath() 方法开始一条路径，或重置当前的路径。
提示：请使用这些方法来创建路径 moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 和 arc()。
提示：请使用 stroke() 方法在画布上绘制确切的路径。

画渐变直线

1. var canvasGradient = ctx.createLinearGradient( 20, 20, 200, 20);
2. //在offset为0的位置(即起点位置)添加一个蓝色的渐变
3. canvasGradient.addColorStop( 0, "yellow");
4. //在offset为0.2的位置(线段左起50%的位置)添加一个绿色的渐变
5. canvasGradient.addColorStop( 0.5, "blue");
6. //在offset为0的位置(即终点位置)添加一个红色的渐变
7. canvasGradient.addColorStop( 1, "red");
8. //将strokeStyle的属性值设为该CanvasGradient对象
9. ctx.strokeStyle = canvasGradient;
10. ctx.lineWidth = 10;
11. ctx.moveTo( 20, 20);
12. ctx.lineTo( 200, 20);
13. ctx.stroke();
14. ctx.beginPath();
15. var canvasGradient01 = ctx.createLinearGradient( 20, 50, 200, 20);
16. canvasGradient01.addColorStop( 0, "red");
17. canvasGradient01.addColorStop( 1, "yellow");
18. ctx.strokeStyle = canvasGradient01;
19. ctx.lineWidth = 10;
20. ctx.moveTo( 20, 50);
21. ctx.lineTo( 200, 50);
22. ctx.stroke();

画折线

在绘制图形路径时，一定要先调用beginPath()方法。beginPath()方法将会清空内存中之前的绘制路径信息。

如果，先调用storke()方法，再调用closePath方法时。在调用storke方法时，折线一画好，紧接着调用closePath方法，关闭当前路径；

如果，先调用closePath()方法，再调用storke方法时。在调用closePath方法时，当前路径没有关闭，该方法将会用直线连接当前点和起始点；

1. ctx.beginPath();
2. ctx.moveTo( 20, 20);
3. ctx.lineTo( 50, 20);
4. ctx.lineTo( 50, 100);
5. ctx.lineTo( 100, 100);
6. ctx.stroke();
7. ctx.closePath();
9. ctx.beginPath();
10. ctx.moveTo( 120, 20);
11. ctx.lineTo( 150, 20);
12. ctx.lineTo( 150, 100);
13. ctx.lineTo( 200, 100);
14. ctx.closePath();
15. ctx.stroke();
16. ctx.closePath();
18. ctx.beginPath();
19. ctx.moveTo( 220, 20);
20. ctx.lineTo( 250, 20);
21. ctx.stroke();
22. ctx.closePath();
23. ctx.beginPath();
24. ctx.lineTo( 250, 100);
25. ctx.lineTo( 300, 100);
26. ctx.stroke();
27. ctx.closePath();

画实心线

fill方法，会把路径填充成一个图形。

画网格

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 lineJoin 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。