JavaScript Canvas 缩放教程
最后修改于 2025 年 4 月 3 日
在本文中，我们将探讨 JavaScript 中的 Canvas 缩放变换。缩放允许您按比例或不成比例地调整绘图的大小。理解缩放对于创建响应式图形至关重要。
基本定义
Canvas 缩放通过乘以其尺寸来修改后续绘图的大小。scale(x, y) 方法接受两个参数，分别用于水平和垂直缩放因子。
缩放会影响调用它之后的所有绘图操作。大于 1 的值会放大，而介于 0 和 1 之间的值会缩小绘图。负值会翻转并缩放内容。
基本缩放
本示例演示了如何在 Canvas 上缩放简单的矩形。
<!DOCTYPE html>
<html>
<head>
<title>Basic Canvas Scaling</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Original rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 50, 50);
// Scaled rectangle
ctx.fillStyle = 'red';
ctx.scale(2, 1.5);
ctx.fillRect(50, 50, 50, 50);
</script>
</body>
</html>
此示例绘制了两个矩形——一个蓝色（原始）和一个红色（缩放）。scale(2, 1.5) 使红色矩形的宽度是原始矩形的 2 倍，高度是原始矩形的 1.5 倍。
请注意，缩放会同时影响绘图的大小和位置。红色矩形之所以显得更大并发生偏移，是因为缩放适用于坐标。
从中心缩放
本示例展示了如何在保持对象居中的同时对其进行缩放。
<!DOCTYPE html>
<html>
<head>
<title>Centered Scaling</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const size = 50;
// Original square
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)';
ctx.fillRect(centerX - size/2, centerY - size/2, size, size);
// Scaled square
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.translate(centerX, centerY);
ctx.scale(1.8, 1.8);
ctx.translate(-centerX, -centerY);
ctx.fillRect(centerX - size/2, centerY - size/2, size, size);
</script>
</body>
</html>
要从中心进行缩放，我们首先平移到中心点，应用缩放，然后平移回来。此技术可保持对象的中心位置。
蓝色正方形是原始的，而红色正方形在两个方向上都被放大了 1.8 倍。半透明的颜色显示了缩放如何影响形状。
非对称缩放
本示例演示了宽度和高度的不同缩放因子。
<!DOCTYPE html>
<html>
<head>
<title>Asymmetric Scaling</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(75, 100, 30, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();
// Scaled ellipse
ctx.scale(2, 0.5);
ctx.beginPath();
ctx.arc(75, 100, 30, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
</script>
</body>
</html>
在这里，我们使用不同的 x 和 y 缩放因子将圆形缩放成椭圆形。scale(2, 0.5) 使其宽度变为两倍，但高度减半。
蓝色圆是原始的，而红色椭圆显示了缩放后的结果。这演示了如何在 Canvas 上创建非均匀缩放效果。
缩放文本
本示例展示了缩放如何影响 Canvas 上的文本渲染。
<!DOCTYPE html>
<html>
<head>
<title>Scaling Text</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Original text
ctx.font = '20px Arial';
ctx.fillText('Original Text', 50, 50);
// Uniformly scaled text
ctx.scale(1.5, 1.5);
ctx.fillText('Scaled 1.5x', 50, 100);
// Reset transform
ctx.setTransform(1, 0, 0, 1, 0, 0);
// Distorted text
ctx.scale(1.8, 0.7);
ctx.fillText('Distorted', 50, 150);
</script>
</body>
</html>
此示例显示了三种文本变体：原始文本、均匀缩放文本和变形文本。缩放会影响包括文本在内的所有 Canvas 绘图操作。
请注意使用 setTransform 在操作之间重置缩放。变形的文本展示了非对称缩放如何创建独特的排版。
多次缩放操作
本示例演示了多次操作的累积缩放效果。
<!DOCTYPE html>
<html>
<head>
<title>Multiple Scaling</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Base rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 50, 50);
// First scaling
ctx.fillStyle = 'red';
ctx.scale(1.5, 1.5);
ctx.fillRect(50, 50, 50, 50);
// Second scaling (cumulative)
ctx.fillStyle = 'green';
ctx.scale(0.8, 1.2);
ctx.fillRect(50, 50, 50, 50);
</script>
</body>
</html>
此示例显示了缩放操作如何累积。每次调用 scale 都会与之前的变换相乘，而不是替换它们。
蓝色矩形是原始的，红色矩形缩放了 1.5 倍，绿色矩形进行了额外的缩放。最终的缩放因子对于宽度为 1.5 × 0.8 = 1.2，对于高度为 1.5 × 1.2 = 1.8。
来源
在本文中，我们探讨了在 HTML Canvas 上缩放绘图的各种技术。掌握缩放变换对于在 Web 应用程序中创建灵活且响应迅速的图形至关重要。
作者
列出 所有 JS Canvas 教程。