サイト内検索

scale() メソッド

構文

context . scale(x, y)

指定の性質を使って伸縮変形を適用して、変換マトリックスを変更します。

仕様

変換マトリックスは、図形やパスが生成されるときに座標に適用されます。

コンテキストが生成されると、変換マトリックスは恒等変換で初期化されます。変形メソッドを使うことによって、変換マトリックスを調整することができます。

変形は、逆の順番で実行されなければいけません。たとえば、幅を2倍にする伸張変形を適用し、続いて、90°の回転変形を適用し、そして、canvas上に幅が高さの2倍となる矩形を描画すると、その実際の結果は、正方形となります。

scale(x, y) メソッドは、引数に指定された伸縮変形を、変換マトリクスに追加しなければいけません。引数 x は水平方向の伸縮係数を、引数 y は垂直方向の伸縮係数を表します。これら係数は倍数です。

原文：http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-scale

サンプル

scaleメソッドのサンプル

このサンプルでは、まず元となる図形として、赤色の円を描いています。そして、scale() メソッドで横に2倍、縦に0.7倍した伸縮をセットした上で、同じ円を青色で生成しています。元の円からどのように伸縮されるかを把握してください。

/* 元の円を赤色で描く */
ctx.beginPath();
ctx.arc(25, 50, 20, 0, 2 * Math.PI, false);
ctx.strokeStyle = "red";
ctx.stroke();
/* 横に2倍、縦に0.7倍した円を青色で描く */
ctx.beginPath();
ctx.scale(2, 0.7);
ctx.arc(25, 50, 20, 0, 2 * Math.PI, false);
ctx.strokeStyle = "blue";
ctx.stroke();

[scale() メソッドの実際のサンプル]

scale() メソッドによる伸縮は、左上端を基準に右下に向けて伸縮されます。描いた図形の中心から伸縮されるわけではない点に注意してください。

ブラウザ対応状況

Firefox Safari Chrome Opera IE ExplorerCanvas
2 ○ 2 ○ 1 ○ 9.2 ○ 9 ○ 0002 ○
3 ○ 3 ○ 2 ○ 9.5 ○   3 ○
3.5 ○ 4 ○ 3 ○ 10 ○    
3.6 ○ 5 ○ 6 ○ 10.60 ○