• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

HTML5Canvas save保存恢复状态

武飞扬头像
PHP中文网
帮助29

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

在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()方法时栈的状态,并用该栈顶所保存的状态进行绘制。

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanfiakk
系列文章
更多 icon
同类精品
更多 icon
继续加载