HTML5Canvas拯救怎么保存恢复状态 - 行业资讯 - 肥雀云

　　介绍

这篇文章主要介绍HTML5Canvas拯救怎么保存恢复状态,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

在绘画的时候,经常会有这种情况,本来正在用绿色笔画,突然需要用红色笔画几笔,但画完了之后又要换成绿色笔。如果是在现实中作的画,可以把笔蘸上不同的墨水,画了之后又蘸上之前的墨水,或者准备几只笔,要用哪只就选哪只。

在画布中也可以这样,不过画布中的画笔永远只有一只,所以,如果要更换画笔的颜色,就需要保存和恢复状态。状态其实就是画布当前属性的一个快照,包括:

图形的属性值,如strokeStyle, fillStyle, globalAlpha,线宽,lineCap, lineJoin, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor等。

当前的裁切路径。

当前应用的变换(即平移,旋转和缩放)。

画布中,使用保存()方法来保存状态,使用恢复()方法来恢复状态.Canvas状态是以栈的方式来保存:每次调用保存()方法,就会把当前状态压入栈顶保存;每次调用恢复()方法,就会把栈顶的状态取出来,并把画布恢复到这个状态,用这个状态绘图。

上下文。fillStyle=皉ed"; 　　上下文。fillRect (10、10、180、180); 　　context.fill (); 　　context.save ();//①栈:“red" 　　上下文。fillStyle=癵reen"; 　　上下文。fillRect (30140140); 　　context.save ();//②栈:“red",“green" 　　上下文。fillStyle=癰lue"; 　　上下文。fillRect (50, 100100); 　　context.restore ();//恢复到②的状态,栈:“red",“green" 　　context.beginPath (); 　　上下文。fillRect (70、70、60、60);//用栈顶的状态绘图,填充“green" 　　context.restore ();//恢复到①的状态,栈:“red" 　　上下文。fillRect (90、90、20、20);//用栈顶的状态绘图,填充“;红色“; 　　context.fill ();

上述代码中,首先绘制第一个红色的矩形。接着调用第一个save()方法,把第一个红色矩形的状态压栈,此时栈中只有一个元素“red",记为①。然后把状态设置为“green",绘制第二个矩形,此时绘制出的是绿色矩形。接着调用第二个保存()方法,把第二个绿色矩形的状态压栈,此时栈中有两个元素“red"“green",栈顶元素为“green",记为②。接着绘制第三个蓝色矩形,此处没有调用保存()方法,栈的状态不变。接着调用恢复()方法,恢复到②的状态,绘制第四个矩形,此时栈顶元素为“green",故绘制出绿色矩形。接着再调用恢复()方法,恢复到①的状态,绘制第五个矩形,此时栈顶元素为“red",故绘制出红色矩形。

癏TML5Canvas拯救怎么保存恢复状态"

从本例可以看的到,通过保存恢复组合把代码包裹起来,实质上是把保存()方法和恢复()方法之间的样式包裹起来,这样一来,它们就不影响后面绘制的图形。

save()方法和恢复()方法都可以被调用任意多次,并且可以嵌套。记住,保存()方法和恢复()方法总是成对出现,每次调用恢复()方法,都是恢复到最近一次调用保存()方法时栈的状态,并用该栈顶所保存的状态进行绘制。

以上是HTML5Canvas拯救怎么保存恢复状态的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!