Canvas 绘制路径
想必大家都知道：连点成线，什么意思呢？ 就是在画布先绘上很多点，然后使用直线或者曲线把它们连接在一起，就成各种不同的图形
-
先在图上绘制多个点
-
随意画一些线条将这些线连在一起
-
可能最后还要闭合，也就是回到起点
我们在画板 (canvas) 中画画也是上面这样的，流程都差不多，我们分解下前面的操作
-
首先，我们要大吼以上，我要画线啦，我们称这个操作为
closePath()这个操作是可选的，如果最后线段要闭合，那么这个就是必选
-
其次要做的就是确定起点坐标，也就是先把画笔移动到某个位置，然后在开始画画
我们称这个操作为
move(x0,y0) -
然后确定好下一个位置 (x1,y1)
我们称这个操作为
lineTo(x1,y1) -
然后就可以使用
lineTo(xn,yn)多画几个点了，直到最后一个点
-
如果我们要将图形闭合，则还要绘制到起始点
我们称这个操作为
closePath()这个操作是可选的，如果不选择就不会闭合
-
最后描边，画出实际的线
Canvas 中的连点成线
Canvas 中的渲染上下文也提供了类似上面这种机制用于画线(图形)
| 方法 | 说明 |
|---|---|
| ctx.beginPath() | 开始一个新路径的 |
| ctx.move(x,y) | 将新路径的起始点移动到坐标 (x，y) |
| ctx.lineTo(x,y) | 使用直线连接子路径的终点到坐标(x，y)，并不会真正地绘制 为什么说是终点，如果不再继续调用 lineTo() 那么它就是终点了不是 |
| ctx.closePath() | 将画笔返回到当前子路径起始点 |
| ctx.stroke() | 根据当前的画线样式，绘制当前或已经存在的路径 |
范例
下面的代码绘制了一个三角形
<!DOCTYPE html> <meta charset="utf-8"> <canvas id="canvas-1" width="400" height="300"> </canvas> <script> var c = document.getElementById("canvas-1"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(200,20); ctx.lineTo(120,120); ctx.closePath(); ctx.stroke(); </script>
运行结果如下
如果没有调用 endPath() 则不会闭合图形
<!DOCTYPE html> <meta charset="utf-8"> <canvas id="canvas-11" width="400" height="300"> </canvas> <script> var c = document.getElementById("canvas-11"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(200,20); ctx.lineTo(120,120); ctx.closePath(); ctx.stroke(); </script>
运行结果如下
还可以使用 strokeStyle 定制线条的颜色
<!DOCTYPE html> <meta charset="utf-8"> <canvas id="canvas-2" width="400" height="300"> </canvas> <script> var c = document.getElementById("canvas-2"); var ctx = c.getContext("2d"); ctx.strokeStyle = "green" ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(200,20); ctx.lineTo(120,120); ctx.closePath(); ctx.stroke(); </script>
运行结果如下
其实没有 beginPath() 也可以调用图形，这时候不管有没有 endPath() 图形不会闭合
<!DOCTYPE html> <meta charset="utf-8"> <canvas id="canvas-3" width="400" height="300"> </canvas> <script> var c = document.getElementById("canvas-3"); var ctx = c.getContext("2d"); ctx.strokeStyle = "green" ctx.moveTo(20,20); ctx.lineTo(200,20); ctx.lineTo(120,120); ctx.endPath() ctx.stroke(); </script>
运行效果如下
看一个多次调用 moveTo() 的例子
<!DOCTYPE html> <meta charset="utf-8"> <canvas id="canvas-4" width="400" height="300"> </canvas> <script> var c = document.getElementById("canvas-4"); var ctx = c.getContext("2d"); ctx.strokeStyle = "green" ctx.moveTo(20,20); ctx.lineTo(200,20); ctx.lineTo(120,120); ctx.stroke(); ctx.strokeStyle = "yellow" ctx.moveTo(100,100); ctx.lineTo(20,200); ctx.lineTo(220,220); ctx.stroke(); </script>
运行效果如下