HTML5Canvassave怎样保留恢复状态？-

本篇文章给大家带来的内容是对于HTML5Canvassave怎样保留恢复状态，有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。 本篇文章给大家带来的内容是对于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();

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

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

save()办法和restore()办法都可以被调取任意屡次，而且可以嵌套。记住，save()办法和restore()办法总是成对涌现，每次调取restore()办法，都是恢复到比来一次调取save()办法时栈的状态，并用该栈顶所保留的状态进行绘制。

以上就是对HTML5Canvas save怎样保留恢复状态的全部介绍，要是您想理解更多有关Html5视频教程，请关注百分百源码网。

以上就是HTML5Canvas save怎样保留恢复状态？的细致内容，更多请关注 百分百源码网 其它相干文章！