浅谈canvas中的beginPath()

var myCanvas = document.getElementById("myCanvas");  
    var context = myCanvas.getContext("2d");  
      
    context.fillStyle = "#e4e4e4";  
    context.fillRect(0,0,500,500);  
  
    context.beginPath();  
      
    context.moveTo(100,100);  
    context.lineTo(200,100);  
    context.strokeStyle = "red";  
    context.stroke();  
  
    context.beginPath();  
    context.moveTo(100,200);  
    context.lineTo(200,200);  
    context.strokeStyle = "blue";  
    context.stroke(); 

1只注释第一个context.stroke()，结果一条蓝线

2 只注释第二个context.beginPath()，结果一条紫线，一条蓝线

3 只注释第一个context.stroke()，结果一条红线

4注释第一个context.stroke()和第二个context.beginPath()，结果两条蓝线

 

总结：

1 stroke()会向上去找 moveTo(),lineTo()定制的曲线，但是如果遇到beginPath()就不再往上找，可见beginPath()代表一个全新的路径或者路径的重置。否则的话会画出所有已定制的线，线就会重叠。