浅谈Canvas的状态绘图

最新推荐文章于 2023-10-25 09:55:35 发布

原创最新推荐文章于 2023-10-25 09:55:35 发布 · 907 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Canvas #状态绘图

HTML 专栏收录该内容

22 篇文章

订阅专栏

本文探讨了Canvas基于状态的绘图特性，重点介绍了beginPath()方法如何隔离不同绘制形态，确保颜色、线宽等样式设置独立于之前的路径，从而实现灵活的图形管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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();  
}

运行结果：两段的路径颜色分别是红色、蓝色。