HTML Canvas setTransform() 方法

实例

绘制一个矩形。重置变换矩阵。再次绘制矩形。重置变换矩阵。再次绘制矩形。

每次调用 setTransform() 时，都会构建一个新的矩阵。在下面的实例中，红色矩形未显示，因为它在蓝色矩形下方。

JavaScript

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


ctx.fillStyle = "yellow";
ctx.fillRect(0, 0, 250, 100)


ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 100);


ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 250, 100);