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()这个方法），所以直接给蓝线覆盖了；
我的口头表达不是很好，希望大家可以多点尝试，便能总结出规律来哈~