最近在联系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

JavaScript中如何让图形旋转不会相互影响的更多相关文章

  1. HTML表格中各元素之间属性之间的相互影响

    开发了一个动态表格制作程序,用的是谷歌浏览器.发现几个现象,记录如下: 1.按照技术文档的说法,正规的表格样式如下: <table> <caption>标题</capti ...

  2. CSS3和javascript中的transform

    在javascript中,WebkitTransform 大概相当于 transform .transform 为标准,WebkitTransform 适用于Webkit浏览器.js中的WebkitT ...

  3. GL10控制图形旋转

    GL10提供了glRotatef(float  angle , float  x ,  float  y , float  z)方法,该方法用于控制旋转,该方法种angle控制旋转角度:而x.y.z参 ...

  4. Zend Studio 12.0.2正式版发布和破解方法,zend studio 12.0.1汉化,相式设置为Dreamweaver,空格缩进为4个, 代码默认不折叠的设置,Outline中使用的图形标志,代码颜色之eot设置。

    背景:zend studio 12.0.2 修复了一个12.0.1的:  Fixed problem with referenced variables marked as undefined,我都说 ...

  5. 【转】JavaScript中的constructor与prototype

    最初对js中 object.constructor 的认识: 在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下 ...

  6. javascript中的“向量”

    什么是向量 向量通常指一个有长度有方向的量.向量使所有的移动和空间行为更容易理解和在代码中实现.向量可以相加,缩放,旋转,指向某物体. 在javascript中,一个方向和长度(即向量)在二维空间中可 ...

  7. Javascript 中 == 和 === 区别是什么?

    Javascript 中 == 和 === 区别是什么? 作者:Belleve链接:https://www.zhihu.com/question/31442029/answer/77772323来源: ...

  8. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  9. JavaScript中的工厂方法、构造函数与class

    JavaScript中的工厂方法.构造函数与class 本文转载自:众成翻译 译者:谢于中 链接:http://www.zcfy.cc/article/1129 原文:https://medium.c ...

随机推荐

  1. Asp.Net Core 第02局:Program

    总目录 前言 本文介绍Program,它包含程序的入口Main方法.从这里开始... 环境 1.Visual Studio 2017 2.Asp.Net Core 2.2 开局 第一手:Program ...

  2. SSH远程免密码的密钥登录服务(Linux,Linux)

    本次实验基于两台Linux虚拟机之间的实验,一台做服务器,一台做客户机,模拟免密码的密钥登录. 首先两台虚拟机需要可以ping通,用客户机访问服务器. sshd服务主配置文件路径: /etc/ssh/ ...

  3. 学习contiki需要知道的一些概念和注意事项

    概念: 1.宏:所谓宏,就是一些命令组织在一起,作为一个单独命令完成一个特定任务.Microsoft Word中对宏定义为:“宏就是能组织到一起作为一独立的命令使用的一系列word命令,它能使日常工作 ...

  4. tomcat开启PID文件

    1.配置tomcat启动后将进程号保存至 ./bin/tomcat.pid 文件. 修改 catalina.sh 文件,在 PRGDIR 下面一行添加 CATALINAPID 参数行,如下: PRGD ...

  5. mysql 性能调优 参数随写

    set global innodb_buffer_pool_size = 12*1024*1024*1024;set global bulk_insert_buffer_size = 12582912 ...

  6. 对python中的__name__的理解

    一开始学习python的时候,不理解python中的__name__的用途,一致感觉__name__的返回结果就是__main__ 今天系统的看了一下,才理解过来,__name__真正的用处是用在使用 ...

  7. ARM与Cortex

    arm系列从arm11开始,以后的就命名为cortex,并且性能上大幅度提升. 从cortex开始,分为三个系列,a系列,r系列,m系列. m系列与arm7相似,不能跑操作系统(只能跑ucos2),偏 ...

  8. 自编shell脚本合集(完善中)

    1.数据库备份 #!/bin/bash user="root" psword="root" bakdir="/data/mysqlbak" ...

  9. DB2实例

    实例是逻辑数据库管理环境,可以在此环境中对数据库进行编目和设置配置参数.根据需要, 可以在一台服务器上创建多个实例,该服务器为每个实例提供唯一的数据库服务器环境.   默认实例:DB2   显示实例: ...

  10. until 循环语句