CanvasRenderingContext2D:scale() 方法

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Canvas 2D API 的 CanvasRenderingContext2D.scale() 方法用于根据水平和垂直方向,为 canvas 单位添加缩放变换。

默认情况下,在 canvas 中一个单位实际上就是一个像素。例如,如果我们将 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");

// 缩放后的矩形
ctx.scale(9, 3);
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 8, 20);

// 将当前变换矩阵重置为单位矩阵
ctx.setTransform(1, 0, 0, 1, 0, 0);

// 未缩放的矩形
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);

结果

规范

Specification
HTML
# dom-context-2d-scale-dev

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
scale

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见