关于对canvas.beginPath()的理解

 1 var myCanvas = document.getElementById("myCanvas");
 2 var ctx = myCanvas.getContext("2d");
 3 
 4 ctx.fillStyle = "#e4e4e4";
 5 ctx.fillRect(0, 0, 500, 500);
 6 
 7 ctx.beginPath();
 8 
 9 ctx.moveTo(150, 100);
10 ctx.lineTo(250, 100);
11 ctx.strokeStyle = "red";
12 ctx.stroke();
13 
14 ctx.beginPath();
15 ctx.moveTo(150, 200);
16 ctx.lineTo(250, 200);
17 ctx.strokeStyle = "blue";
18 ctx.stroke();

今天刚开始学习html5的基本知识，在练习中遇到的问题是beginPath()这个方法的使用，看到这个代码，我们毫无疑问的知道显示出来的分别就是一条红线和一条蓝线，那么假如我把第二个beginPath()注释了，会出现什么情况呢？答案是一条紫线和一条蓝线，这是为什么呢？因为canvas的绘制方法都是从beginPath之后的所有路径开始绘制的，beginPath是开启新的一条路径，一开始是绘制红线（因为存在stroke()这个方法），由于第二次绘制的蓝线没有开启新的路径，所以在原有红线的基础上覆盖多一层蓝线，因此成了紫线；

那么如果把第一个ctx.stroke()和第二个ctx.beginPath()注释掉的话，结果又会是什么颜色呢？结果是两条蓝线，因为第一个红线并没有绘制（没有stroke()这个方法），所以直接给蓝线覆盖了；

我的口头表达不是很好，希望大家可以多点尝试，便能总结出规律来哈~

转载于:https://www.cnblogs.com/tingting4133/p/3966218.html