HTML5 canvas scale メソッド
HTML5 canvas リファレンス
例
小さな矩形と大きさが5倍の矩形を描画し、再度同じ矩形を描画します:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(5,5);
ctx.strokeRect(5,5,25,15);
Try it yourself »
定義と用法
scale メソッドは、図面を大きくしたり小さくしたりします。
2つのパラメータを使用し、幅または高さ、または両方を伸縮することができます
幅と高さの両スケールが (2,2) の場合、指定した幅と高さが 2倍 で描画されます。
また、位置も伸縮します。スケールが (2,2) の場合、キャンバスの左上か2倍離れたところへ配置されます。
JavaScript 構文: |
context.scale(x,y); |
ブラウザ・サポート
scale メソッドは、主要な全ブラウザがサポートしています。
パラメータ値
パラメータ |
値 |
説明 |
Play it |
x |
width |
スケーリングする幅。 1= スケーリングなし、0.5= 半分のサイズ、2= 2倍のサイズなど |
Play it » |
y |
height |
スケーリングする高さ。 1= スケーリングなし、0.5= 半分のサイズ、2= 2倍のサイズなど |
Play it » |
HTML5 canvas リファレンス
|