canvas 中的变换矩阵

2020-02-12

上一期的《canvas 基础及实现贝塞尔曲线动画》,我们回顾了 canvas 的基础操作和贝塞尔曲线实现原理;这一次,我们来补充下前一篇遗留下来的基础知识点之一:transform 变换矩阵。

变形 transform

transform(a, b, c, d, dx, dy) 方法是将当前的变换矩阵乘上参数的矩阵:

a c dx
b d dy
0 0 1

参数各自代表如下:

  • a:水平方向的缩放
  • b:水平方向的倾斜偏移
  • c:竖直方向的倾斜偏移
  • d:竖直方向的缩放
  • dx:水平方向的移动
  • dy:竖直方向的移动

setTransform(a, b, c, d, dx, dy) 方法会将当前的变形矩阵重置为单位矩阵,然后用相同的参数调用 transform 方法,即该方法取消当前变形,然后设置为指定的变形。
resetTransform() 重置当前变形为单位矩阵,相当于调用 setTransform(1, 0, 0, 1, 0, 0),即下面的默认矩阵(单位矩阵):

1 0 0
0 1 0
0 0 1

下面是示例图和代码:

ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 50);

ctx.transform(1, 0, 0, 1, 50, 50);
ctx.fillStyle = 'orange';
ctx.fillRect(0, 0, 100, 50);

ctx.transform(0, 1, 1, 0, 50, 50);
ctx.fillStyle = 'yellow';
ctx.fillRect(0, 0, 100, 50);

ctx.transform(1, -1, 1, 1, 0, 0);
ctx.fillStyle = 'lime';
ctx.fillRect(0, 0, 100, 50);

原文链接:juejin.im

上一篇:Vue export import 导入导出的多种方式与区别
下一篇:分组归类js中的offset,client,scroll,page等大小
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部