HTML canvas scale() 方法

在 HTML5 中，我们可以使用 <canvas> 元素来绘制图形和动画。<canvas> 元素提供了一个用于绘制图形的画布，我们可以通过 JavaScript 来操作这个画布，实现各种效果。

scale() 方法是 <canvas> 元素的一个重要方法，它用于缩放绘图。使用 scale() 方法可以在不改变图像形状的情况下，按照指定的比例进行缩放。这在制作动画、放大缩小图像等方面非常有用。

语法

scale() 方法的语法如下：

context.scale(x, y);

其中，x 表示横向缩放的比例，y 表示纵向缩放的比例。如果只传入一个参数，那么横向和纵向都将按照这个参数进行缩放。

示例

让我们来看一个简单的示例，演示如何使用 scale() 方法来缩放绘图：

// www.javascriptcn.com code example
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 绘制一个矩形
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);

// 缩放绘图
ctx.scale(2, 2);

// 绘制一个缩放后的矩形
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 50, 50);

在上面的示例中，我们首先在画布上绘制了一个红色的矩形，然后使用 scale(2, 2) 方法将图形放大两倍，最后在同样的位置上绘制了一个蓝色的矩形。

注意事项

在使用 scale() 方法时，需要注意以下几点：

1. 缩放是相对于原点进行的，默认原点是画布的左上角。
2. 连续调用 scale() 方法会叠加缩放效果，而不是替换。
3. 不要忘记在绘制图形之前重置缩放比例，以免影响后续绘图。

通过合理地运用 scale() 方法，我们可以实现更加丰富多彩的绘图效果，为我们的 web 应用增添更多交互和视觉效果。