canvas的save与restore方法的作用
来源:互联网 发布:鼎金网络投教中心 编辑:程序博客网 时间:2024/04/25 15:40
网上搜罗了一堆资料,最后总结一下。
save:用来保存Canvas的状态。save之后,可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。 restore:用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。
对canvas中特定元素的旋转平移等操作实际上是对整个画布进行了操作,所以如果不对canvas进行save以及restore,那么每一次绘图都会在上一次的基础上进行操作,最后导致错位。比如说你相对于起始点每次30度递增旋转,30,60,90.如果不使用save 以及 restore 就会变成30, 90, 150,每一次在前一次基础上进行了旋转。save是入栈,restore是出栈。
var canvas = document.getElementById("canvas");var context = canvas.getContext('2d');context.lineWidth = "10";context.strokeStyle = "#fe9901";context.translate(canvas.width / 2, canvas.height / 2);context.rotate( 30 / 180 * Math.PI);context.beginPath();context.moveTo(0, -180);context.lineTo(0, -200);context.stroke();context.rotate( 30 / 180 * Math.PI);context.beginPath();context.moveTo(0, -140);context.lineTo(0, -160);context.stroke();
没有使用save,restore,第一次绘制时画布旋转30度,然后按照坐标绘制直线,第二次绘制在第一次基础上继续绘制,旋转30度,实际上相对于起点,旋转了60. 所以画出来两条直线不在一条指线上。
context.save(); context.rotate( 30 / 180 * Math.PI); context.beginPath(); context.moveTo(0, -180); context.lineTo(0, -200); context.stroke(); context.restore(); context.rotate( 30 / 180 * Math.PI); context.beginPath(); context.moveTo(0, -140); context.lineTo(0, -160); context.stroke();
第二次绘制加入save和restore, 再第一次绘制后,resore到起始状态,也就是现在画布又回到了0度位置,而不是30度,所以第二次绘制是从0度开始绘制,绘制出来应该和第一次的直线在一条指线上。
0 0
- canvas的save与restore方法的作用
- canvas的save与restore方法的作用
- 初学canvas,canvas.save()与canvas.restore()的作用
- canvas.save和canvas.restore的作用
- canvas.save() 和 canvas.restore() 的作用
- canvas的save,restore方法
- canvas中的save和restore方法的作用
- canvas 的save()和restore()方法
- canvas 的save()和restore()方法
- canvas 的save()和restore()方法
- canvas的save restore clipRect方法解析
- canvas 的restore 和 save 方法
- 理解Canvas的save()和restore()方法
- Canvas的save和restore
- Canvas的save和restore
- Canvas的save和restore
- Canvas的save和restore
- Canvas的save和restore
- zookeeper运维管理
- hdu 5867 (一到一千的模拟题)
- clipBoardEvent, execCommand等粘贴板相关研究
- Cracer渗透测试网络培训第一期
- 早上学了一下java的随机数,下面把代码复制一下
- canvas的save与restore方法的作用
- 树上路径
- 可乐瓶盖问题
- oc学习之属性
- 【LintCode】第k大元素
- uva 1277 Cops and Thieves(完成阻击所需要的最少人数)
- 加密狗原理-高强度加密-程序加密技巧
- 浅谈对梯度下降的理解
- 机器学习中的范数规则化之L0、L1与L2范数