canvas状态绘图

怎样去理解canvas状态绘图呢？下面举个例子大家就明白了。

场景： 绘制一条红色、一条蓝色的线
这个简单吧，想当然有了以下代码

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineWidth=5;
ctx.strokeStyle="blue";
ctx.stroke();
ctx.moveTo(40,20);
ctx.lineTo(40,100);
ctx.strokeStyle="red";
ctx.stroke();

运行效果：

嗯？？？ 为什么会是这样呢？
这便是由于canvas绘图是状态绘图导致的，在绘制第二条线的时候又重新绘制了第一条线，所以第一条蓝色的线又被红色线覆盖了。
那又如何解决这个问题呢
利用beginPath进行分隔即可，beginPath的作用就是重新开始绘制，可以重新设置绘制属性。
那我们现在就可以实现之前的场景了

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineWidth=5;
ctx.strokeStyle="blue";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(40,20);
ctx.lineTo(40,100);
ctx.strokeStyle="red";
ctx.stroke();

运行效果：