Biegral Blog

Canvas是基于状态的绘图。

beginPath核心的作用是：将不同的绘制形态进行隔离，每次执行此方法，表示重新绘制一个路径，与之前绘制的路径可以分开进行样式设置和管理，如颜色、线宽等。

var canvas = document.getElementsByTagName("canvas")[0];    
if (canvas.getContext) {    
    var context = canvas.getContext("2d");    
    context.beginPath();  
	context.strokeStyle = "red";
    context.moveTo(100, 100);  
    context.lineTo(200, 200); 
	context.strokeStyle = "blue";
    context.moveTo(200, 200);  
    context.lineTo(300, 300);  
    context.stroke();  
} 

运行结果：两段的路径颜色均是蓝色。

var canvas = document.getElementsByTagName("canvas")[0];    
if (canvas.getContext) {    
    var context = canvas.getContext("2d");    
    context.beginPath();  
	context.strokeStyle = "red";
    context.moveTo(100, 100);  
    context.lineTo(200, 200); 
    context.stroke();  
    context.beginPath();  
	context.strokeStyle = "blue";
    context.moveTo(200, 200);  
    context.lineTo(300, 300);  
    context.stroke();  
}