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 参考