你的位置:首页 > 软件开发 > 网页设计 > Canvas 保存状态

Canvas 保存状态

发布时间:2016-10-23 16:00:24
1.保存和恢复绘图状态:在绘制图形时,难免会重复使用某个样式,甚至有时会在不同颜色之间来回切换。那么为了减少代码冗余,我们可以调用画布中的save()方法,来帮我们保存一些样式和属性,这样我们就可以调用画布中的restore() 方法,来再次使用这些我们曾保存好的样式和属性了!下 ...

1.保存和恢复绘图状态:

在绘制图形时,难免会重复使用某个样式,甚至有时会在不同颜色之间来回切换。

那么为了减少代码冗余,我们可以调用画布中的save()方法,来帮我们

保存一些样式和属性,这样我们就可以调用画布中的restore() 方法,来再次使用这些我们曾保存好的样式和属性了!

下面看下具体代码:

<!DOCTYPE html><html ="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>

原标题:Canvas 保存状态

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录