Canvas 保存状态
Posted 李小白
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Canvas 保存状态相关的知识,希望对你有一定的参考价值。
1.保存和恢复绘图状态:
在绘制图形时,难免会重复使用某个样式,甚至有时会在不同颜色之间来回切换。
那么为了减少代码冗余,我们可以调用画布中的save()方法,来帮我们
保存一些样式和属性,这样我们就可以调用画布中的restore() 方法,来再次使用这些我们曾保存好的样式和属性了!
下面看下具体代码:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>保存和恢复绘图状态</title> <script type="text/javascript"> window.onload = function () { //保存绘图状态 save var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.save(); //保存状态 context.fillRect(50, 50, 100, 100); //初始定义,绘制红色矩形 //恢复绘图状态 restore context.fillStyle = "rgb(0,255,0)"; context.fillRect(200, 50, 100, 100); //绘制绿色矩形 context.restore(); //恢复画布状态 context.fillRect(350, 50, 100, 100); //恢复到初始定义,绘制红色矩形 } </script> </head> <body> <canvas id="myCanvas" width="1000" height="1000"> 您的浏览器暂不支持画布! </canvas> </body> </html>
2.保存和恢复多个绘图状态:
多个绘图状态是如何保存的呢?
我们可以这么理解:有台复印机在大量的复印资料,最先复印的肯定是在最下层的,后来的一张张的累在上面,然后堆成一摞儿,
最上面的那份肯定是最后一次复印的,这个毋庸置疑!
保存状态其实就类似复印机的工作状态,最近保存的在最上层!
来看下代码怎么实现:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>保存和恢复绘图状态</title> <script type="text/javascript"> window.onload = function () { //保存绘图状态 save var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.save(); context.fillRect(50, 200, 100, 100); //第一个保存状态,绘制红色矩形 context.fillStyle = "rgb(0,0,255)"; context.save(); context.fillRect(200, 200, 100, 100); //第二个保存状态,绘制蓝色矩形 context.restore(); context.fillRect(350, 200, 100, 100); //恢复蓝色矩形的保存状态,因为它是最后的保存状态,所以它最先恢复。 context.restore(); context.fillRect(500, 200, 100, 100); //恢复红色矩形的保存状态。 } </script> </head> <body> <canvas id="myCanvas" width="1000" height="1000"> 您的浏览器暂不支持画布! </canvas> </body> </html>
交流群:225443677
以上是关于Canvas 保存状态的主要内容,如果未能解决你的问题,请参考以下文章
Android 中Canvas的save(),saveLayer()和restore()解析
Android UICanvas 画布 ③ ( Canvas 图层栈 | Canvas#saveLayer() 新建图层 | Canvas 状态栈保存信息标志位 )