context.setTransform(1,0,0,1,0,0);//重置转换为初始化状态
var angleInRadians = 45 * Math.PI / 180;var width = 40;
var height = 40;
context.rotate(angleInRadians);
context.fillStyle = "red";
context.fillRect(0,0 , width, height);

刚开始使用rotate认为就像上面这样使用就可以了,可是显示如下图:

没有出现预料的旋转45度角的正方形。

出现预料之外的原因是画布旋转是以上图所示的Top-left角为中心点,而不是以Origin Point为中心店的,所以得将旋转中心移动到 Origin Point:

//now draw a red square
context.setTransform(1,0,0,1,0,0);
var angleInRadians = 45 * Math.PI / 180;
var x = 50;
var y = 100;
var width = 40;
var height = 40;
context.translate(x+.5*width, y+.5*height);
context.rotate(angleInRadians);
context.fillStyle = "red";
context.fillRect(-.5*width,-.5*height , width, height);//这个四边形的起点肯定是自己长高各一半了,意思是长方形居于Origin Point的中心,结果如下图所示

所以在Canvas变换操作的时候找准图形的中心很重要,譬如缩放也会遇到同样的问题。

即使如下图所示的不是正常的四边形,也可以用四边形将其围起来找到其重心:

Canvas rontate(旋转) 使用误区的更多相关文章

  1. Html5 Canvas动画旋转的小方块;

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. canvas绘制旋转图形

    将绘制到canvas上的要素进行旋转: 1.绘制时,通过操作画布的坐标轴状态:平移画布原点,旋转坐标轴等,达到旋转图形的目的 2.操作操作DOM元素,直接旋转canvas画布 操作画布的坐标轴状态: ...

  3. 测试canvas绘制旋转文字的性能

    canvas 绘制各种动画效果时,我们经常会使用画布旋转,使绘制上去的元素有旋转的效果. 最近在项目中碰到了很严重的性能问题,经常排查发现是因为绘制批量文字时使用了画布旋转,且每行文字的旋转角度是不一 ...

  4. canvas之旋转一条线段

    <canvas id="canvas" width="600" height="500" style="background ...

  5. HTML5 Canvas 绘制旋转45度佛教万字

    效果如下: 代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Cont ...

  6. Canvas 同心圆旋转示例解析

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. canvas 方块旋转案例

    <!doctype html><html><head> <meta charset="UTF-8"> <meta name=& ...

  8. canvas学习和面向对象(二)

    Canvas 学习(二) 上一篇Canvas 学习(一)中我是用canvas绘制了一些基本和组合的图形. 现在开始绘制图片和动画帧,以及面向对象的升级版本. 还是一样,看代码,所有的代码都托管在git ...

  9. HTML5 canvas处理图片的各种效果,包括放大缩小涂鸦等

    http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502151385.html jQuery 缩放 旋转 裁剪图片 Image Cropper ...

随机推荐

  1. Preview of Spring-framework :Spring框架的预习和自我整理

    Spring简介 - 预习的自我整理 1. What's Spring? Spring是一个从实际开发中抽取出来的框架,完成了大量开发中的通用步骤,留给开发者仅仅是与特定应用相关的部分,从而提高了企业 ...

  2. (hdu step 7.1.3)Lifting the Stone(求凸多边形的重心)

    题目: Lifting the Stone Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...

  3. MATLAB导入数据importdata功能

    用load函数导入mat文件大家都会.可是今天我拿到一个数据,文件后缀名竟然是'.data'.该怎么读呢? 我仅仅好用matlab界面Workspace区域的"import data&quo ...

  4. elasticsearch2.2

    elasticsearch2.2 集群搭建各种坑     目前生产环境的es版本是1.0版本,需要升级到最新的2.2版本,于是在测试环境进行部署集群测试,在测试过程中遇到的坑相当多,下面详细介绍下. ...

  5. Java EE (4) -- Java EE 6 Java Persistence API Developer Certified Expert(1z0-898)

    Overview of the Java Persistence API Describe the basics of Object Relational Mapping (ORM) Define t ...

  6. Directx11学习笔记【二十】 使用DirectX Tool Kit加载mesh

    本文由zhangbaochong原创,转载请注明出处:http://www.cnblogs.com/zhangbaochong/p/5788482.html 现在directx已经不再支持.x文件了, ...

  7. eclipse报错:发现了以元素 'd:skin' 开头的无效内容。此处不应含有子元素

    Console报错: sdk\system-images\android-22\android-wear\armeabi-v7a\devices.xml cvc-complex-type.2.4.d: ...

  8. 关于telnet协议的研究以及用java进行封装实现自己的telnet客户端(转)

    最近在做一个远程控制的模块,其中用到了telnet协议,开始用的是apache-net包的telnetclient,但发现问题不少,比较慢,还有就是判断是否read完毕的问题.后来经过讨论打算实现自己 ...

  9. iOS 中client和server的 Web Service 网络通信 (2)

    在实际的应用开发过程中,同步请求的用户体验并非非常好:我们都知道.Apple是非常重视用户体验的.这一点也成为了行业的标杆,没实用户哪里来的好产品.所以用户体验是极其重要的.貌似废话有点多.接下来进入 ...

  10. 举例说, Decorator模式(Decorator Pattern)

    前言    在食品工业中的装饰图案具有比较广泛的应用,大多数的两个图案和在网上的例子饮食相关的,一旦被称为电影的手表,点咖啡要加糖要加奶昔要加这加那的时候.感觉好有派~好高大上啊~.为啥我在小卖部都是 ...