HTML 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); 亲自试一试 »
更多实例见下文。
描述
scale() 方法缩放当前上下文。
注意
如果您缩放了一个上下文，所有将来的绘图都将被缩放。如果您 scale(2,2)，绘图将比画布的 0,0 位置指定的距离远两倍。
另请参阅
rotate() 方法（旋转上下文）
translate() 方法（重新映射 0,0 位置）
transform() 方法 (缩放、旋转、移动、倾斜上下文)
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); 亲自试一试 »浏览器支持
<canvas> 元素是 HTML5 标准（2014）。
scale() 在所有现代浏览器中都受支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
