CanvasPattern: phương thức setTransform()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Note: This feature is available in Web Workers.

CanvasPattern.setTransform() dùng một đối tượng DOMMatrix làm ma trận biến đổi của mẫu và áp dụng nó lên mẫu.

Cú pháp

setTransform(matrix)

Tham số

matrix: Một DOMMatrix dùng làm ma trận biến đổi của pattern.

Đây là một đoạn mã mẫu dùng phương thức setTransform để tạo một CanvasPattern với phép biến đổi mẫu được chỉ định từ một DOMMatrix. Mẫu sẽ được áp dụng nếu bạn đặt nó làm fillStyle hiện tại và sẽ được vẽ lên canvas khi dùng phương thức fillRect(), chẳng hạn.

html

<canvas id="canvas"></canvas>

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const matrix = new DOMMatrix([1, 0.2, 0.8, 1, 0, 0]);

const img = new Image();
img.src = "canvas_create_pattern.png";

img.onload = () => {
  const pattern = ctx.createPattern(img, "repeat");
  pattern.setTransform(matrix.rotate(-45).scale(1.5));
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 400, 400);
};