Scale() | HTML<canvas>方法
定义与用法
scale() 方法缩放当前绘图至更大或更小。
提示:如果您对绘图进行缩放,所有之后的绘图也会被缩放。定位也会被缩放。如果您 scale(2,2),那么绘图将定位于距离画布左上角两倍远的位置。
语法格式
context.scale(scalewidth,scaleheight);
示例代码
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
</script>
效果展示:
浏览器支持
方法 | |||||
---|---|---|---|---|---|
Scale() | Yes | Yes | Yes | Yes | Yes |
Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 scale() 方法。
提示:Internet Explorer 8 及之前的版本不支持 <canvas> 元素。
参数值
参数 | 描述 |
---|---|
scalewidth | 缩放当前绘图的宽度(1=100%,0.5=50%,2=200%,依次类推)。 |
scaleheight | 缩放当前绘图的高度(1=100%,0.5=50%,2=200%,依次类推)。 |
更多示例
<script>
var c = document.getElementById("myCanvas");
var ctx = c.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);
</script>