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 |
❮ Canvas 參考
