保存恢复状态
在绘画的时候，经常会有这种情况，本来正在用绿色笔画，突然需要用 红色 笔画几笔，但画完了之后又要换成绿色笔。如果是在现实中作画，可以把笔蘸上不同的墨水，画了之后又蘸上之前的墨水， 或者 准备几只笔，要用哪只就选哪只。
在Canvas中也可以这样， 不过 Canvas中的 画笔 永远 只有一只。所以，如果要更换画笔的颜色，就需要保存和恢复状态。状态其实就是 画布 当前属性的一个 快照 ，包括：
图形的属性值，如 stroke Style, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor等。
当前的 裁切 路径。
当前应用的变换（即平移、旋转和缩放）。
Canvas中，使用save()方法来保存状态，使用re Store ()方法来恢复状态。Canvas状态是以栈的方式来保存：每次调用save()方法，就会把当前状态压入栈顶保存；每次调用restore()方法，就会把栈顶的状态取出来，并把画布恢复到这个状态，用这个状态绘图。
context.fillStyle = " red ";
context.fillRect(10, 10, 180, 180);
context.fill();
context.save(); &nbs p; // ① 栈: "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.be gin Path();
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"，故绘制出红色矩形。运行结果如图 4& # 8209;35 所示：
图4-35 save()方法和restore()方法保存恢复状态
从本例可以看到，通过save-restore组合把代码包裹起来，实质上是把save()方法和restore()方法之间的样式包裹起来，这样一来，它们就 不影响 后面绘制的图形。
save()方法和restore()方法都可以被调用任意多次，并且可以嵌套。记住，save()方法和restore()方法总是成对出现，每次调用restore()方法，都是恢复到最近一次调用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"，故绘制出红色矩形。运行结果如图 4‑35 所示：
图4-35 save()方法和restore()方法保存恢复状态
从本例可以看到，通过save-restore组合把代码包裹起来，实质上是把save()方法和restore()方法之间的样式包裹起来，这样一来，它们就不影响后面绘制的图形。
save()方法和restore()方法都可以被调用任意多次，并且可以嵌套。记住，save()方法和restore()方法总是成对出现，每次调用restore()方法，都是恢复到最近一次调用save()方法时栈的状态，并用该栈顶所保存的状态进行绘制。
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-HTML5下Canvas save怎么保存恢复状态？ 全部内容，希望文章能够帮你解决 html5教程-HTML5下Canvas save怎么保存恢复状态？ 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-HTML5下Canvas save怎么保存恢复状态？的详细内容...