JavaScript中如何让图形旋转不会相互影响
2024-10-19 22:16:32
最近在联系JavaScript 二维绘图,经常会用到旋转,前几篇博文也提到过这类问题。
但是我忘记了JavaScript二维绘图中有关旋转最核心的两个方法:save()和restore()
在w3c上对于save()方法的解释是:
save( ) 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。这就允许您临时地改变图像状态。
原文链接:http://www.w3school.com.cn/jsref/met_canvasrenderingcontext2d_save.asp
restore() 的解释:
restore() 方法从栈中弹出存储的图形状态并恢复 CanvasRenderingContext2D 对象的属性、剪切路径和变换矩阵的值。
原文链接:http://www.w3school.com.cn/jsref/met_canvasrenderingcontext2d_restore.asp
其实对于这两个方法有个更为生动形象的解释:类似于拿了一把标尺画完图之后又把标尺放回了原位
这样就可以避免rotate()方法互相干扰
不然很有可能出现这种情况:
你会发现每次旋转时秒针会在时针分钟旋转的基础上再次旋转,本来只想每秒旋转6度的,但是由于指针间相互干扰直接旋转了半个钟面,连带着数字也一起旋转
所以在每次旋转时要记得在旋转前后加入save()和restore()方法保存和恢复画布的旋转状态。
代码:
ctx.save();
ctx.rotate(angle*Math.PI/180);
ctx.fillRect(x,y,w,h);
ctx.restore();
部分资料转自:http://www.cnblogs.com/youryida/p/3487601.html
最新文章
- Linux实战教学笔记07:Linux系统目录结构介绍
- jar命令的用法详解
- OpenGL 坐标与矩阵转换
- Openjudge 1.13-40 提取数字串按数值排序
- [codevs2181]田忌赛马
- 用友UAP
- [Irving]SQL去重复-DISTINCT用法
- Java Tomcat Glassfish Weblogic远程debug(remote debug)
- qemu 调试(二)
- Nutch之简介与安装
- 我知道你不知道的负Margin
- Typescript学习笔记
- Python学习之list有序集合
- libcoro:在c++中支持coroutine
- python3 Flask -day4 自定义url转换器
- POJ1509 Glass Beads 【后缀自动机】
- Ubuntu16.04安装yum的一种方式
- 【Core】创建简单的Core MVC项目
- 《转载》Python并发编程之线程池/进程池--concurrent.futures模块
- Asp.net中的web.config配置