canvas中的save方法和restore方法
以下博文摘自 https://www.cnblogs.com/fangsmile/p/9530226.html ,在此表示感谢。
save( ) : 保存当前的绘图状态
restore( ) : 恢复之前保存的绘图状态
在canvas环境中绘图时,可以利用绘图堆栈状态、每个状态随时存储canvas上下文数据。
示例代码:
<body> <!--创建一个边长为200的正方形画布--> <canvas id="mc" width="200" height="200" style="border:1px solid black"></canvas> <script type="text/javascript"> var canvas = document.getElementById('mc'); //获取Canvas元素对应的DOM对象 var ctx = canvas.getContext('2d');//获取Canvas上的绘图的CanvasRenderingContext2D对象 ctx.lineWidth=3; //设置笔触线条的宽度 ctx.translate(100,100); //将原点左边设置到画布的中间 ctx.save(); //保存当前画布的状态,该状态包含了lineWidth=3,translate(100,100),然后其他那些属性为默认值. ctx.strokeStyle='red'; //设置线条颜色为红色 //坐标系统旋转90° ctx.rotate(Math.PI/2); //画第一条直线 ctx.beginPath(); ctx.moveTo(-100,0); ctx.lineTo(100,0); ctx.closePath(); ctx.stroke(); //恢复之前保存的绘图状态 ctx.restore(); //再画第二条直线 ctx.beginPath(); ctx.moveTo(-100,0); ctx.lineTo(100,0); ctx.closePath(); ctx.stroke(); </script> </body>
在浏览器中看到的效果如下:
从示例代码可知,画两条线的代码是一样的,可是画出来的一条是垂直的红线,一条是水平的黑线。调用save( )方法时,保存的状态是lineWidth = 3, translate(100, 100), 然后其他哪些属性为默认值,如默认的lineStyle为黑色。
画第一条线时,是将坐标系旋转了90度,设置了lineStyle="red",故画出来的是垂直的红色线;画第二条线前采用了restore()方法,即恢复为之前的保存的绘图状态,该绘图状态是坐标系统没有经过旋转的,线条颜色也默认为黑色,所以画出来的先就是我们想要得到的水平的黑色线。
未完,待续......