Rumah > hujung hadapan web > Tutorial H5 > HTML5Canvas save如何保存恢复状态?

HTML5Canvas save如何保存恢复状态?

云罗郡主
Lepaskan: 2018-10-20 15:50:37
ke hadapan
2855 orang telah melayarinya

本篇文章给大家带来的内容是关于HTML5Canvas save如何保存恢复状态,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

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

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

当前的裁切路径。

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

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

context.fillStyle = "red";
context.fillRect(10, 10, 180, 180);
context.fill();
context.save();                 // ① 栈: "red"
context.fillStyle = "green";
context.fillRect(30, 30,140,140);
context.save();                 // ② 栈: "red","green"
context.fillStyle = "blue";
context.fillRect(50, 50, 100,100);
context.restore();               // 恢复到 ② 的状态, 栈: "red","green"
context.beginPath();
context.fillRect(70, 70, 60, 60);   // 用栈顶的状态绘图,填充"green"
context.restore();               // 恢复到 ① 的状态, 栈: "red"
context.fillRect(90, 90, 20, 20);   // 用栈顶的状态绘图,填充" red "
context.fill();
Salin selepas log masuk

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

save-restore.png

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

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

以上就是对HTML5Canvas save如何保存恢复状态的全部介绍,如果您想了解更多有关Html5视频教程,请关注PHP中文网。


Atas ialah kandungan terperinci HTML5Canvas save如何保存恢复状态?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan