Canvas scale() 方法
示例
绘制一个矩形，缩放至 200%，然后再次绘制矩形
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
尝试一下 »
更多示例在下方。
描述
The scale() 方法缩放当前上下文。
注意
如果你缩放了上下文，所有未来的绘制都将被缩放。如果你 scale(2,2)，绘制将与你指定的距离 canvas 的 0,0 位置的两倍远。
另请参阅
The rotate() 方法 (旋转上下文)
The translate() 方法 (重新映射 0,0 位置)
The transform() 方法 (缩放、旋转、移动、倾斜上下文)
The setTransform() 方法 (缩放、旋转、移动、倾斜上下文)。
语法
| context.scale(scalewidth, scaleheight) |
参数值
| 参数 | 描述 | 试一下 |
|---|---|---|
| scalewidth | 缩放宽度 (1=100%，0.5=50%，2=200%) | 试一下 » |
| scaleheight | 缩放高度 (1=100%，0.5=50%，2=200%) | 试一下 » |
返回值
| 无 |
更多示例
示例
绘制一个矩形，缩放至 200%，再次绘制矩形，缩放至 200%，再次绘制矩形，缩放至 200%，再次绘制矩形
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
尝试一下 »
浏览器支持
The <canvas> 元素是 HTML5 标准 (2014)。
scale() 在所有现代浏览器中都受支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 参考
