CanvasRenderingContext2D: scale() 方法
Canvas 2D API 的 CanvasRenderingContext2D.scale() 方法会在画布坐标系中添加一个水平和/或垂直的缩放变换。
默认情况下，画布上的一个单位等于一个像素。缩放变换会改变这种行为。例如，缩放因子为 0.5 会导致单位大小为 0.5 像素；因此，形状会以正常大小的一半绘制。类似地，缩放因子为 2.0 会增加单位大小，使一个单位等于两个像素；因此，形状会以正常大小的两倍绘制。
语法
js
scale(x, y)
参数
返回值
无（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 |
浏览器兼容性
加载中…
另见
- 定义此方法的接口：
CanvasRenderingContext2D