HTML5 Canvas 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()方法时栈的状态,并用该栈顶所保存的状态进行绘制。
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》,并全部在 GitHub 上开源。
版权声明:本文出自 歪脖网 的《HTML宝典》,欢迎在线阅读,并提出宝贵意见。
HTML5 Canvas save 保存恢复状态相关推荐
- HTML5 Canvas
HTML5 Canvas 转自:https://blog.csdn.net/u012468376/article/details/73350998 一.canvas简介 <canvas&g ...
- 学习HTML5 Canvas这一篇文章就够了
一.canvas简介 <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是 ...
- HTML5 Canvas 详解
本文转载自: https://blog.csdn.net/u012468376/article/details/73350998 一.canvas简介 <canvas> 是 HTML5 ...
- HTML5 Canvas 旋转
旋转 与移动一样,Context对象能够调用rotate()方法来按一定的夹角转动Canvas画布.rotate()方法的原型如下: void rotate(radian); 用于将Canvas画布顺 ...
- html5 canvas移动位置,HTML5 Canvas 移动
移动 context对象可以通过调用translate()方法来移动canvas画布中坐标原点的位置.translate()方法的原型如下: void translate(x, y); 用于将该con ...
- HTML5中canvas画布属性,html5 Canvas之画布合成的属性总结
首先解释一下合成的含义,合成是指如何精细控制画布上面的对象的透明度和分层效果.其中控制Canvas画布合成的操作的两个属性分别是:globalAlpha和globalCompositeOperatio ...
- html5制作风车旋转,HTML5 Canvas 旋转风车绘制
写在前面: 亲爱的朋友们大家好,鄙人自学前端,第一次写博客,写的不好的地方,烦请同学们谅解. 在进行教学之前,我想聪明的你已经掌握了基本的Canvas基本操作方法,如果对Canvas还不是很了解,那么 ...
- 用html制作旋转风车,HTML5 Canvas 旋转风车绘制
写在前面: 亲爱的朋友们大家好,鄙人自学前端,第一次写博客,写的不好的地方,烦请同学们谅解. 在进行教学之前,我想聪明的你已经掌握了基本的Canvas基本操作方法,如果对Canvas还不是很了解,那么 ...
- canvas save()和canvas restore()状态的保存和恢复使用方法及实例
canvas.save()用来保存先前状态的 canvas.restore()用来恢复之前保存的状态 注:两种方法必须搭配使用,否则没有效果 <!DOCTYPE html> <htm ...
最新文章
- python 同时发多个请求
- string转成对象_详解Java I/O流(五),对象序列化
- Swin Transformer V2!MSRA原班人马提出了30亿参数版本的Swin Transformer!
- 2017.10.9 放棋子 思考记录
- 图片插入mysql数据库_图片如何存入数据库?
- 项目杂-备注-说明-其他
- ubuntu之解决挂载NTFS磁盘时出现input/output error
- 一文学懂经典算法系列之:直接选择排序(附讲解视频)
- C语言中的 pow 函数 使用方法及注意事项,和常见报错原因,且分享实战中的使用
- 在线License管理系统(支持离线授权)
- linux自动升级关闭,Ubuntu关闭内核自动更新
- python笔记(一) 数据类型 函数
- win10系统双屏如何设置不同的桌面
- 将NV21图像某一区域变黑色
- PCB中走线与电流的关系
- pandoc下载 - 文档格式转换器
- Linux创建模板封装虚拟机
- C语言剖析OC的rangeOfString方法
- 服务器放在北极什么位置,服务器放在北极和深海,是谁给了你勇气?
- 【git】当git出现On branch master Changes not staged for commit: