HTMLリファレンスマニュアル

HTMLタグ全般

HTML canvas scale()メソッド

scale()はCanvas 2D APIはx水平方向とy垂直方向に基づいて、canvasユニットに拡大変換を追加する方法を提供します。デフォルトでは、canvasの中で1つのユニットは実際には1ピクセルです。例えば、0.5を拡大因子として指定すると、最終的なユニットが0になります。5ピクセルに増大し、形状のサイズが元の半分になります。同様に、2.0を拡大因子として指定すると、ユニットサイズが2ピクセルに増大し、形状のサイズが元の2倍になります。

HTML canvas 参考書

オンラインサンプル

矩形を描画、拡大して 200％、そして矩形を再描画：

例

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8>
<title>HTML　canvas　scale()メソッドの使用-基本チュートリアル(oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="300"　height="150"　style="border:1px　solid　#d3d3d3>
あなたのブラウザは HTML5　canvas タグ。
</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>

テストして見てみましょう ‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome、Safariがscale()をサポートしています。メソッド。

注意：Internet Explorer 8 及びそれ以前のバージョンでは<canvas>要素をサポートしていません。

定義と用法

scale()メソッドは現在の描画を拡大または縮小します。

注意：描画を拡大すると、その後のすべての描画も拡大されます。位置も拡大されます。scale(2,2），それにより描画はキャンバスの左上角から2倍の距離に配置されます。

JavaScript文法：	context.scale(scalewidth,scaleheight);

パラメータの値

パラメータ	説明
scalewidth	現在の描画の幅を拡大（1=100％、0.5=50％、2=200%，そのように順次）。
scaleheight	現在の描画の高さを拡大（1=100％、0.5=50％、2=200%，そのように順次）。

オンラインサンプル

矩形を描画；拡大して 200%，矩形を再描画；拡大して 200%，矩形を再描画；拡大して 200%，矩形を再描画：

例

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8>
<title>HTML　canvas　scale()メソッドの使用-基本チュートリアル(oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="300"　height="170"　style="border:1px　solid　#d3d3d3>
あなたのブラウザは HTML5　canvas タグ。
</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>

テストして見てみましょう ‹/›

HTML canvas 参考書

HTML: <template> タグ