Canvas rontate(旋转) 使用误区
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(旋转) 使用误区的更多相关文章
- Html5 Canvas动画旋转的小方块;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- canvas绘制旋转图形
将绘制到canvas上的要素进行旋转: 1.绘制时,通过操作画布的坐标轴状态:平移画布原点,旋转坐标轴等,达到旋转图形的目的 2.操作操作DOM元素,直接旋转canvas画布 操作画布的坐标轴状态: ...
- 测试canvas绘制旋转文字的性能
canvas 绘制各种动画效果时,我们经常会使用画布旋转,使绘制上去的元素有旋转的效果. 最近在项目中碰到了很严重的性能问题,经常排查发现是因为绘制批量文字时使用了画布旋转,且每行文字的旋转角度是不一 ...
- canvas之旋转一条线段
<canvas id="canvas" width="600" height="500" style="background ...
- HTML5 Canvas 绘制旋转45度佛教万字
效果如下: 代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Cont ...
- Canvas 同心圆旋转示例解析
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- canvas 方块旋转案例
<!doctype html><html><head> <meta charset="UTF-8"> <meta name=& ...
- canvas学习和面向对象(二)
Canvas 学习(二) 上一篇Canvas 学习(一)中我是用canvas绘制了一些基本和组合的图形. 现在开始绘制图片和动画帧,以及面向对象的升级版本. 还是一样,看代码,所有的代码都托管在git ...
- HTML5 canvas处理图片的各种效果,包括放大缩小涂鸦等
http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502151385.html jQuery 缩放 旋转 裁剪图片 Image Cropper ...
随机推荐
- 存读Blob Oracle
- dede时间格试,dede时间标签
dede的日期时间格式[field:pubdate function='strftime("时间",@me'/]这个是固定格式,(利用strftime()函数格式化时间),因些只需 ...
- JAVA 数据权限设计
数据权限设计 前言 在各种系统中.要保证数据对象的安全性以及易操作性,使企业的各业务部门.职能部门可以方便并且高效的协同工作,那么一个好的数据权限管理设计就成为一个关键的问题.尽管企业中各个单元的工作 ...
- linux下查找某个文件
参考http://blog.csdn.net/gray13/article/details/6365654 一.通过文件名查找法: 举例说明,假设你忘记了httpd.conf这个文件在系统的哪个目录 ...
- vim使用(三):.viminfo和.vimrc
1. viminfo 在vim中操作的行为,vim会自己主动记录下来,保存在 ~/.viminfo 文件里. 这样为了方便下次处理, 如:vim打开文件时,光标会自己主动在上次离开的位置显示. 原来搜 ...
- EHCache的使用
在开发高并发量,高性能的网站应用系统时,缓存Cache起到了非常重要的作用.本文主要介绍EHCache的使用,以及使用EHCache的实践经验.笔者使用过多种基于Java的开源Cache组件,其中包括 ...
- Android在API推荐的方式来实现SQLite数据库的增长、删除、变化、检查操作
package com.examp.use_SQLite.dao; import java.util.ArrayList; import java.util.List; import android. ...
- Enum变量值的Discretion
有些时候,某个方法的返回值是个枚举类型,比如描述登录结果: public enum LoginResult { Success, WrongPassword, } 当前段UI获取到登陆方法的返回结果时 ...
- 重新想象 Windows 8 Store Apps (26) - 选取器: 自定义文件选取窗口, 自定义文件保存窗口
原文:重新想象 Windows 8 Store Apps (26) - 选取器: 自定义文件选取窗口, 自定义文件保存窗口 [源码下载] 重新想象 Windows 8 Store Apps (26) ...
- MyBatis学习门户网站(一)
需要jar包:mybatis-3.x.x.jar .假设需要和spring综合,此外,我们需要增加相关的包 1:看到项目文件夹 不要在意红色 2:依照步骤: 1:增加jar包 2:创建数据源(conf ...