变形

到目前位置，我们所有的绘制，都是基于标准坐标系来绘制的。

标准坐标系的特点是：

  • 原点在左上角
  • 尺寸与画布像素点 1:1现在介绍的变形，就是改变标准坐标系的方法。

变形的基本方法

  • 平移：translate(x, y)
  • 旋转：rotate(angle)
  • 缩放：scale(x, y)
  • 变形：transform(m11, m12, m21, m22, dx, dy)、setTransform(m11, m12, m21, m22, dx, dy)、resetTransform()

变形的基本原则

  • 不会改变已经绘制的图形
  • 改变的是坐标系
  • 变形之后的所有绘制将依照新的坐标系来绘制

举例

  1. for (let i = 0; i < 6; i++) {
  2.   ctx.fillRect(0, 0, 40, 40)
  3.   ctx.translate(50, 0)
  4. }

运行效果如图。

变形

可以看到，虽然每次 fillRect 绘制的参数没有变化，但是因为坐标系变了，最终绘制出来的就是位置不同的图形。