JavaScript Canvas setTransform 教程
最后修改于 2025 年 4 月 3 日
本教程探讨了 JavaScript 中的 Canvas setTransform 方法。它允许您直接设置当前的变换矩阵，从而实现复杂的变换。掌握 setTransform 对于高级 Canvas 图形至关重要。
基本定义
setTransform 方法用一个新的变换矩阵替换当前的变换矩阵。它接受表示 2D 变换矩阵的六个参数。
该矩阵将点从坐标空间变换到当前坐标空间。参数为：scaleX、skewY、skewX、scaleY、translateX 和 translateY。这提供了对变换的精确控制。
基本 setTransform 用法
本示例演示如何使用 setTransform 进行简单的平移。
<!DOCTYPE html>
<html>
<head>
<title>Basic setTransform</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw original rectangle
ctx.fillStyle = 'red';
ctx.fillRect(20, 20, 50, 50);
// Apply transformation
ctx.setTransform(1, 0, 0, 1, 100, 50);
ctx.fillStyle = 'blue';
ctx.fillRect(20, 20, 50, 50);
</script>
</body>
</html>
此代码首先在 (20,20) 处绘制一个红色矩形。然后，它使用 setTransform 将坐标系向右移动 100 像素，向下移动 50 像素。
蓝色矩形以相同的坐标 (20,20) 绘制，但显示为已平移。矩阵 (1,0,0,1) 在不倾斜的情况下保持原始缩放。
使用 setTransform 进行缩放
本示例展示如何使用 setTransform 应用缩放变换。
<!DOCTYPE html>
<html>
<head>
<title>Scaling with setTransform</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Original circle
ctx.beginPath();
ctx.arc(50, 50, 30, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();
// Scaled circle
ctx.setTransform(2, 0, 0, 1.5, 0, 0);
ctx.beginPath();
ctx.arc(50, 50, 30, 0, Math.PI * 2);
ctx.fillStyle = 'purple';
ctx.fill();
</script>
</body>
</html>
在这里，我们绘制两个圆 - 一个在应用 setTransform 之前，一个在之后。第一个圆正常绘制，第二个圆在水平方向上放大 2 倍，在垂直方向上放大 1.5 倍。
setTransform 参数 (2,0,0,1.5,0,0) 指定了缩放因子，没有进行任何平移或倾斜。由于 x 和 y 缩放因子不同，圆会显得被拉伸。
使用 setTransform 进行倾斜
本示例演示如何使用 setTransform 创建倾斜效果。
<!DOCTYPE html>
<html>
<head>
<title>Skewing with setTransform</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Original square
ctx.fillStyle = 'orange';
ctx.fillRect(50, 50, 100, 100);
// Skewed square
ctx.setTransform(1, 0.5, 0.5, 1, 200, 0);
ctx.fillStyle = 'teal';
ctx.fillRect(50, 50, 100, 100);
</script>
</body>
</html>
此代码首先绘制一个普通的橙色正方形。然后，它使用具有非零倾斜参数的 setTransform 应用倾斜变换。
参数 (1,0.5,0.5,1) 同时创建了水平和垂直倾斜。正方形看起来对角线扭曲，但保持其面积。平移 (200,0) 将其向右移动以便于查看。
组合变换
本示例展示如何在一次 setTransform 调用中组合多个变换。
<!DOCTYPE html>
<html>
<head>
<title>Combined Transformations</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Original triangle
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 150);
ctx.lineTo(0, 150);
ctx.closePath();
ctx.fillStyle = 'navy';
ctx.fill();
// Combined transformation
ctx.setTransform(1.5, 0.3, 0.2, 0.8, 200, 100);
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 150);
ctx.lineTo(0, 150);
ctx.closePath();
ctx.fillStyle = 'crimson';
ctx.fill();
</script>
</body>
</html>
本示例将缩放、倾斜和平移组合在一个 setTransform 调用中。原始的海军蓝色三角形被变换成一个扭曲的绯红色版本。
参数 (1.5,0.3,0.2,0.8) 创建了非均匀缩放和倾斜。平移 (200,100) 将变换后的形状移动到新的位置。这展示了 setTransform 应用复杂变换的能力。
重置变换
本示例展示如何将变换矩阵重置为单位矩阵。
<!DOCTYPE html>
<html>
<head>
<title>Resetting Transformations</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Apply complex transformation
ctx.setTransform(1.2, 0.4, 0.1, 0.9, 50, 30);
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 80);
// Reset to identity matrix
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.fillStyle = 'green';
ctx.fillRect(200, 50, 100, 80);
</script>
</body>
</html>
首先，我们应用一个复杂的变换并绘制一个蓝色矩形。然后，我们使用 setTransform(1,0,0,1,0,0) 重置变换矩阵。
绿色矩形在没有任何变换的情况下绘制，外观与指定的一致。当您需要在应用变换后返回正常坐标时，这非常有用。
来源
本教程介绍了强大的 Canvas 变换 setTransform 方法。通过这些技术，您可以创建复杂的图形效果并精确控制 Canvas 坐标系。
作者
列出 所有 JS Canvas 教程。