跳到主要内容

setTransform

2024年06月19日
柏拉文
越努力，越幸运

一、认识​

setTransform() 是 Canvas 2D API 使用单位矩阵重新设置（覆盖）当前的变换并调用变换的方法，此变换由方法的变量进行描述。变换矩阵 描述如下:

--            --
|   a   c  e   |
|   b   d  f   |
|   0   0  1   |
--            --

二、语法​

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

ctx.setTransform(a, b, c, d, e, f);

  • a (m11): 水平缩放

  • b (m12): 垂直倾斜。

  • c (m21): 水平倾斜。

  • d (m22): 垂直缩放。

  • e (dx): 水平移动。

  • f (dy): 垂直移动。

2.1 平移​

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

ctx.transform(1, 0, 0, 1, x, y);

等效于

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

ctx.translate(x, y);

2.2 旋转​

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

const degress = angle * (Math.PI / 180);
const cos = Math.cos(degress);
const sin = Math.sin(degress);
ctx.transform(cos, sin, -sin, cos, 0, 0);

等效于

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

const degress = angle * (Math.PI / 180);
ctx.rotate(degress);

三、用法​

3.1 经过 translate 变换后, 重置画布起始点​

function drawTranslateRectangle() {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");

  canvas.width = 400;
  canvas.height = 400;

  // 平移画布
  ctx.translate(100, 100);

  // 平移后 绘制矩形
  ctx.fillStyle = "red";
  ctx.fillRect(0, 0, 200, 100);

  // 重置画布起始点
  ctx.setTransform(1, 0, 0, 1, 0, 0);

  // 重置起始点后 绘制矩形
  ctx.fillStyle = "grey";
  ctx.fillRect(0, 0, 200, 100);

  document.body.appendChild(canvas);
}

drawTranslateRectangle();