HTML5 canvas save()和restore()方法讲解
我们尝试用这个连续矩形的例子来描述 canvas 的状态堆是如何工作的。
第一步是用默认设置画一个大四方形,然后保存一下状态。改变填充颜色画第二个小一点的白色四方形,然后再保存一下状态。再次改变填充颜色绘制更小一点的蓝色四方形。然后我们调用了restore方法将设置回到前一个save状态下的fillStyle="white",即在不设定颜色值的情况下再绘制最小的矩形时其添充色为白色。
一旦我们调用 restore
,状态堆中最后的状态会弹出,并恢复所有设置。如果不是之前用 save
保存了状态,那么我们就需要手动改变设置来回到前一个状态,这个对于两三个属性的时候还是适用的,一旦多了,我们的代码将会猛涨。 简而言之restore方法就可以理解成将其对应的当前save状态下的设置全部恢复为前一个状态
代码:
<script type="text/JavaScript">
window.onload=function(){
var ctx=document.getElementByIdx_x_x("canvas").getContext("2d");
ctx.fillRect(10,10,150,150);
ctx.save();
ctx.fillStyle="white";
ctx.fillRect(30,30,110,110);
ctx.save();
ctx.fillStyle="blue";
ctx.fillRect(50,50,70,70);
ctx.restore();//回到上一个状态,即 ctx.fillStyle="white";
ctx.save();
ctx.fillRect(70,70,30,30);//所以此处没有设定fillStyle的时候颜色为white,注意哦!如果在白色矩形后面也restore一下刚此处的fillStyle就为黑色了
ctx.restore();
}
</script>
最新文章
- linux系统下使用xampp 丢失mysql root密码【xampp的初始密码为空】
- maven 记录
- Chrome开发,debug的使用方法。
- CodeForces #367 div2 C
- WebSphere MQ 入门指南
- Android开发随笔4
- Remastersys打包你自己的ubuntu成iso文件,保存原来的所有配置
- android 开源 OCR 项目 及手写识别
- posix thread概述(示例代码)
- Spring.net架构示例(含Aop和Ioc)源码
- 用java实现Simsimi小黄鸡接口
- cors技术
- 快捷找jar包方式
- Error 56: The Cisco Systems, Inc. VPN Service has not been started(Cisco VPN在Vista下出现Error 56的解决办法)
- 1.2.8 Excel做个滚动抽奖
- Atitit sleep原理 node.js sleep解决方案 timer
- 1.7.8使用return 停止线程
- Windows Server 2008远程桌面端口更改方法
- Https与Http,SSL,DevOps, 静态代码分析工具,RFID, SSH, 非对称加密算法(使用最广泛的一种是RSA), 数字签名, 数字证书
- (转)Python开发规范
热门文章
- Unity动态字体在手机上出现字体丢失问题解决
- The Pilots Brothers&#39; refrigerator - poj 2965
- 【Mac + Python】苹果系统之安装Python3.6.x环境
- linux vmware提示:此虚拟机似乎正在使用中,取得该虚拟机的所有权失败错误
- 解决:Adb connection Error:远程主机强迫关闭了一个现有的连接
- java程序优化
- 8168开发之---1g内存换成512M的内存映射配置
- python爬虫学习研究
- 列表按照字母排序检索SideBar
- xCode9 一直Indexing