CanvasRenderingContext2D：scale() 方法

基线 广泛可用

此功能已得到充分确立，并且可在许多设备和浏览器版本中使用。它自以下时间起在所有浏览器中都可用： 2015 年 7 月.

Canvas 2D API 的CanvasRenderingContext2D.scale() 方法向画布单元添加水平和/或垂直缩放变换。

默认情况下，画布上的一个单位恰好是一个像素。缩放变换会修改此行为。例如，缩放因子为 0.5 会导致单位大小为 0.5 像素；因此，形状以一半的正常大小绘制。同样，缩放因子为 2.0 会增加单位大小，使一个单位变为两个像素；因此，形状以两倍的正常大小绘制。

语法

js
scale(x, y)

参数

x

水平方向的缩放因子。负值会沿垂直轴翻转像素。值为 1 不会导致水平缩放。

y

垂直方向的缩放因子。负值会沿水平轴翻转像素。值为 1 不会导致垂直缩放。

返回值

无（undefined）。

示例

缩放形状

此示例绘制了一个缩放后的矩形。然后绘制一个未缩放的矩形以进行比较。

HTML

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

JavaScript

矩形的指定宽度为 8，高度为 20。变换矩阵将其水平缩放 9 倍，垂直缩放 3 倍。因此，其最终大小为宽度 72 和高度 60。

请注意，它在画布上的位置也会发生变化。由于其指定的角为 (10, 10)，因此其渲染的角变为 (90, 30)。

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

// Scaled rectangle
ctx.scale(9, 3);
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 8, 20);

// Reset current transformation matrix to the identity matrix
ctx.setTransform(1, 0, 0, 1, 0, 0);

// Non-scaled rectangle
ctx.fillStyle = "gray";
ctx.fillRect(10, 10, 8, 20);

结果

缩放后的矩形为红色，未缩放的矩形为灰色。

水平或垂直翻转

您可以使用 scale(-1, 1) 水平翻转上下文，使用 scale(1, -1) 垂直翻转上下文。在此示例中，单词“Hello world！”被水平翻转。

请注意，对 fillText() 的调用指定了一个负 x 坐标。这是为了适应负缩放因子：-280 * -1 变为 280，文本从该点向左绘制。

HTML

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

JavaScript

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

ctx.scale(-1, 1);
ctx.font = "48px serif";
ctx.fillText("Hello world!", -280, 90);
ctx.setTransform(1, 0, 0, 1, 0, 0);

结果

规范

规范
HTML 标准
# dom-context-2d-scale-dev

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅