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 |
❮ 画布参考
