HTML 參考手冊(cè)

HTML 標(biāo)簽大全

HTML canvas scale() 方法

scale() 是 Canvas 2D API 根據(jù) x 水平方向和 y 垂直方向，為canvas 單位添加縮放變換的方法。默認(rèn) 在 canvas 中一個(gè)單位實(shí)際上就是一個(gè)像素。例如，如果我們將0.5作為縮放因子，最終的單位會(huì)變成0.5像素，并且形狀的尺寸會(huì)變成原來(lái)的一半。相似的方式，我們將2.0作為縮放因子，將會(huì)增大單位尺寸變成兩個(gè)像素。形狀的尺寸將會(huì)變成原來(lái)的兩倍。

HTML canvas 參考手冊(cè)

在線示例

繪制矩形，放大到 200%，然后再次繪制矩形：

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas scale()方法使用-菜鳥(niǎo)教程(cainiaoplus.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。
</canvas>
<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> 
</body>
</html>

測(cè)試看看 ?/?

瀏覽器兼容性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 scale() 方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定義和用法

scale() 方法縮放當(dāng)前繪圖至更大或更小。

注意：如果您對(duì)繪圖進(jìn)行縮放，所有之后的繪圖也會(huì)被縮放。定位也會(huì)被縮放。如果您 scale(2,2)，那么繪圖將定位于距離畫(huà)布左上角兩倍遠(yuǎn)的位置。

JavaScript 語(yǔ)法：	context.scale(scalewidth,scaleheight);

參數(shù)值

參數(shù)	描述
scalewidth	縮放當(dāng)前繪圖的寬度（1=100%，0.5=50%，2=200%，依次類(lèi)推）。
scaleheight	縮放當(dāng)前繪圖的高度（1=100%，0.5=50%，2=200%，依次類(lèi)推）。

在線示例

繪制一個(gè)矩形；放大到 200%，再次繪制矩形；放大到 200%，再次繪制矩形；放大到 200%，再次繪制矩形：

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas scale()方法使用-菜鳥(niǎo)教程(cainiaoplus.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="170" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。
</canvas>
<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>
</body>
</html>

測(cè)試看看 ?/?

HTML canvas 參考手冊(cè)

HTML: <template> 標(biāo)簽