文档章节

Transform 的简单理解

tianyawhl
 tianyawhl
发布于 2018/12/07 12:17
字数 816
阅读 18
收藏 0
COS

canvas里面的transfrom与css3中的基本是一样的,唯一的不同是原点,canvas的默认原点是图形的左上角,css3是图形的中心,

translate(x,y)方法

是用来移动canvas和它的原点到一个不同的位置,在做变形前,先保存状态是一个良好的习惯,

transform的例子

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 3; j++) {
      ctx.save();
      ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';
      ctx.translate(10 + j * 50, 10 + i * 50);
      ctx.fillRect(0, 0, 25, 25);
      ctx.restore();
    }
  }
}

旋转rotate(angle)

旋转的中心点始终是 canvas 的原点,如果要改变它,我们需要用到 translate 方法。

这个方法只接受一个参数:旋转的角度(angle),它是顺时针方向的,以弧度为单位的值。
rotate(angle)的例子

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.translate(75,75);

  for (var i=1;i<6;i++){ // Loop through rings (from inside to out)
    ctx.save();
    ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';

    for (var j=0;j<i*6;j++){ // draw individual dots
      ctx.rotate(Math.PI*2/(i*6));
      ctx.beginPath();
      ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
      ctx.fill();
    }

    ctx.restore();
  }
}

缩放scale(x, y)

我们用它来增减图形在 canvas 中的像素数目,对形状,位图进行缩小或者放大。

方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子,它们都必须是正值。值比 1.0 小表示缩小,比 1.0 大则表示放大,值为 1.0 时什么效果都没有。

变形 Transform

ctx.transform(a, b, c, d, e, f),上面的3种方法都是基于transform的,也就是transform的快捷方式

这个函数的参数各自代表如下:

a:水平方向的缩放

b:水平方向的倾斜偏移

c:竖直方向的倾斜偏移

d:竖直方向的缩放

e:水平方向的移动

f:竖直方向的移动

  • 缩放:scale(a, d) 等同于 matrix(a, 0, 0, d, 0, 0);
  • 平移:translate(e, f) 等同于 matrix(1, 0, 0, 1, e, f);
  • 旋转:rotate(deg) 等同于 matrix(cos(deg), sin(deg), -sin(deg), cos(deg), 0, 0);

一个图形同时需要缩放平移和旋转,就是3个单独的矩阵相乘

举例 transform:translate(10px,20px) rotate(37deg) scale(1.5,2)

即 matrix(1.2,0.9,-1.2,1.6,10,20)

上面的3个矩阵可以先计算2个相乘,得出的结果与第三个相乘

矩阵的算法对应关系(如下图)

resetTransform() 重置当前变形为单位矩阵,它和调用以下语句是一样的:ctx.setTransform(1, 0, 0, 1, 0, 0); 

transform与setTransform的例子

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  var sin = Math.sin(Math.PI/6);
  var cos = Math.cos(Math.PI/6);
  ctx.translate(100, 100);
  var c = 0;
  for (var i=0; i <= 12; i++) {
    c = Math.floor(255 / 12 * i);
    ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
    ctx.fillRect(0, 0, 100, 10);
    ctx.transform(cos, sin, -sin, cos, 0, 0);
  }
  
  ctx.setTransform(-1, 0, 0, 1, 100, 100);
  ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
  ctx.fillRect(0, 50, 100, 100);
}

上面的代码ctx.setTransform(-1, 0, 0, 1, 100, 100);是什么意思?先明白ctx.setTransform(-1, 0, 0, 1,0, 0);的意思,看下面的图示就很明白

公众号:前端之攻略

© 著作权归作者所有

tianyawhl
粉丝 8
博文 261
码字总数 138286
作品 0
常州
前端工程师
私信 提问
unity2d 物体指向鼠标方向绕某一点旋转

在2D游戏中,类似泡泡龙炮台发射、敌人飞机永远指向PLAYER、愤怒小鸟弹弓发射等效果,都需要用到物体跟随鼠标绕一个点旋转的效果,在unity中实现代码很简单,但是在理解上有一定障碍,因为u...

安世博
2016/01/15
1K
0
WebGL 3D 入门与实践: CSS 中的 3D 属性

本节内容来自于小册 WebGL 入门与实践。 前面介绍了 3D 变换的原理和算法实现,并通过一些简单的 demo 演示了变换效果,但这些 demo 都是使用 WebGL 技术渲染。本节我们暂时不使用 WebGL,而...

lucefer
03/20
0
0
WebGL 3D 入门系列:深入研究 --- CSS 与 3D 之 transform

本节内容来自于小册 WebGL 入门与实践第24节。 前面介绍了 3D 变换的原理和算法实现,并通过一些简单的 demo 演示了变换效果,但这些 demo 都是使用 WebGL 技术渲染。本节我们暂时不使用 We...

lucefer
03/19
0
0
CSS3与动画有关的属性transition、animation、transform对比

最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了。 索性在这里进行一个简单的对比,加深自己的记忆。 浏览器兼容性 CSS3 transform 属性 Internet Explorer ...

蓓蕾心晴
2017/06/02
0
0
【J2me3D系列学习文章之三】(立即模式)对立方体进行变换操作-旋转、缩放、平移

李华明Himi 原创,转载务必在明显处注明: 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/j2me-kjava/262.html 上一篇文章讲述了如何构造一个简单的立方体,以及对立方体设定...

迷途d书童
2012/03/19
28
0

没有更多内容

加载失败,请刷新页面

加载更多

shangcheng-my

1.数据库主键、外键类型为bigint,那么在后台应该用什么类型的变量定义? 后台用string接收,因为前段传过来的一般都是json字符串,后台直接接收,mysql是可以吧数字类型的字符串转换为对应的...

榴莲黑芝麻糊
昨天
4
0
微服务架构依赖图

基于spring-cloud-alibaba + dubbo

龙影
昨天
5
0
Centos7 安装zabbix-agent

rpm -i https://repo.zabbix.com/zabbix/4.2/rhel/6/x86_64/zabbix-release-4.2-2.el6.noarch.rpm 可以到https://repo.zabbix.com/zabbix找到对应的版本 yum install zabbix-agent -y 出现E......

abowu
昨天
8
0
文本编辑器GNU nano 4.4 发布

GNU nano 4.4 "Hagelslag" 更新日志: 启动时,光标可以放在第一个或最后一个出现位置 字符串前面带有+/string 或 +?string的字符串。 发生自动硬包装时((--breaklonglines),任何前导引号...

linuxCool
昨天
7
0
你知道字节序吗

字节序 最近在调一个自定义报文的接口时,本来以为挺简单的,发现踩了好几个坑,其中一个比较“刻骨铭心”的问题就是数据的字节序问题。 背景 自定义报文,调用接口,服务端报文解析失败 iO...

杭城小刘
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部