HTML5 キャンバス変換

HTML5 キャンバスの変換メソッド、HTMLを使用してどのように使用するかのオンラインインスタンスデモ5 キャンバスを回転、移動、拡大、特定の点を中心に回転、拡大率の設定などに使用できます。

変換をHTMLに適用できます5キャンバス上に描かれるすべての内容。以下に適用できる変換のリストがあります:

• 移動（描画内容の移動）

• 回転

• 拡大

本文ではこれらすべての変換を紹介します

変換マトリックス

以下の2D上下文に変換マトリックスを設定します。このマトリックスはキャンバス上に描かれるすべての内容に乗算されます。本テュートリアルで使用するサンプルでは、それを「単位」マトリックスに設定しており、x、y座標群に乗算するとx、yが得られます。つまり、何も変換を行わないことになります。
これは変換マトリックスを単位マトリックスに設定する方法です:

context.setTransform(1,　0,　0,　1,　0,　0);

移動

キャンバス上に描画されるすべてに移動を適用できます。移動は描画された内容の再配置を意味します。以下は、コードで移動を設定する方法です:

var　x　=　100;
var　y　=　　50;
context.translate(x,　y);

このサンプルでは、キャンバス上に描画されるすべての形状がx軸上に移動します100、y軸上に移動50。
注意：平移はtranslate()関数の呼び出し後に描画される形状にのみ適用されます。その関数の呼び出し前に描画された形状は影響を受けません。
これは別の例です。同じ座標で2つの矩形を描画していますが、translate()関数を呼び出す前に1つの矩形を描画し、その後で1つを描画しています

<canvas　id="ex1"　width="500"　height="150"　style="border:　1px　solid　#cccccc;">
　　　　HTML5　Canvas　not　supported
</canvas>
<script>
var　canvas　　=　document.getElementById("ex1");
var　context　=　canvas.getContext("2d");
context.fillStyle　=　"#ff0000";
context.fillRect(10,10,　100,　100);
context.translate(50,　25);
context.fillStyle　=　"#0000ff";
context.fillRect(10,10,　100,　100);
</script>

これはキャンバス上に描画時の結果です:

回転

自動回転をHTML5キャンバス上に描画されるすべての形状。これはrotate()2D上下文の機能が完了した後。これはシンプルな例です:

context.rotate(radians);

回転角度はrotate()関数にパラメータとして渡されます。この値は度ではなく弧度で指定する必要があります。
設定後の回転で描画されるすべての形状はキャンバス上の0,0点周りで回転します。これはキャンバスの左上角です。
平移と同様に、回転はrotate()関数の呼び出し後に描画されるすべての形状に適用されます。
これは設定前後で同じ矩形を描画する例です:

<canvas　id="ex2"　width="500"　height="150"　style="border:　1px　solid　#cccccc;">
　　　　HTML5　Canvas　not　supported
</canvas>
<script>
　var　canvas　　=　document.getElementById("ex2");
var　context　=　canvas.getContext("2d");
　context.fillStyle　=　"#ff0000";
　context.fillRect(10,10,　100,　100);
　context.rotate(　(Math.PI　/　180)　*　25);　　//rotate　25　degrees.
　context.fillStyle　=　"#0000ff";
　context.fillRect(10,10,　100,　100);
</script>

これはキャンバス上に矩形を描画時の見た目です:

異なるポイント周りで回転

前述の通り、すべての形状はキャンバス（0,0）の左上角周りで回転します。しかし、形状を異なるポイント周りで回転したい場合どうしますか？例えば、自分自身の中心周りで回転するようにしますか？
形状を自分自身の中心周りで回転させるには、まずキャンバスを形状の中心に平移し、キャンバスを回転し、キャンバスを0,0に平移し、形状を描画する必要があります。
これは中心周りで回転する青色の長方形の例です:

<canvas　id="ex3"　width="500"　height="150"　style="border:　1px　solid　#cccccc;">
　　　　HTML5　Canvas　not　supported
</canvas>
<script>
var　canvas　　=　document.getElementById("ex3");
var　context　=　canvas.getContext("2d");
var　x　　　　　　=　10;
var　y　　　　　　=　10;
var　width　　=　100;
var　height　=　100
var　cx　　　　　=　x　+　0.5　*　width;
var　cy　　　　　=　y　+　0.5　*　height;
context.fillStyle　=　"#ff0000";
context.fillRect(x,　y,　width,　height);
context.translate(cx,　cy);
context.rotate(　(Math.PI　/　180)　*　25);　　//rotate　25　degrees.
context.translate(-cx,　-cy);　//set center back to 0,0
context.fillStyle　=　"#0000ff";
context.fillRect(x,　y,　width,　height);
</script>

これはキャンバス上に描画時の見た目です:

この例では、まずキャンバスの中心を正方形の中心（cx、cy）に平移（移動）します。次にキャンバスを回転25次に、キャンバスを再度0,0に変換します。今度は、cx、cyの周りでキャンバスが回転しました。25度。あなたが描画するすべての内容はcx、cyの周りに回転表示されます。最終的には、矩形は何も変わらないように描画されますが、今はcx、cyの周りに回転されます。25度。これは、変換コールを使用して実現できます。長方形の座標は変更されません。context.fillRect()の注意点にご注意ください、赤色と青色の長方形を描画する2つの呼び出しがどのように同じであるかをご覧ください。それらの間の変換コールが異なる位置と回転位置に表示される理由です。

拡大

HTML内で描画されるすべての形状に拡大を適用できます。5キャンバス上に描画されるすべての形状に自動的に拡大が適用されます。
拡大時に、x軸とy軸のすべての座標を拡大するための特定の要素を使用できます。これらの要素を設定するには、以下のようにscale()関数を使用できます：

var　scaleX　=　2;
var　scaleY　=　2;
context.scale(scaleX,　scaleY);

このサンプルでは、x軸とy軸のすべての座標を拡大します2倍。
translate()とrotate()と同様に、拡大率はscale()コールの後に描画される形状にのみ適用されます。
これは別の赤色と青色の長方形を描画するコードの例です。この場合、拡大率は青色の長方形に適用されます：

<canvas　id="ex5"　width="500"　height="250"　style="border:　1px　solid　#cccccc;">
　　　　HTML5　Canvas　not　supported
</canvas>
<script>
var　canvas　　=　document.getElementById("ex5");
var　context　=　canvas.getContext("2d");
var　x　　　　　　=　10;
var　y　　　　　　=　10;
var　width　　=　100;
var　height　=　100
context.fillStyle　=　"#ff0000";
context.fillRect(x,　y,　width,　height);
context.scale(2,2);
context.fillStyle　=　"#0000ff";
context.fillRect(x,　y,　width,　height);
</script>

キャンバス上に生成されたgrapichsです：

青色の長方形の大きさは赤色の長方形の2倍です。
また、青色の長方形の左上隅からキャンバスの左上隅（0,0）までの距離も2倍です。すべての座標が2倍に拡大され、長方形の左上隅の座標も同様です。拡大時に形状が移動しないようにするには、拡大と平移を組み合わせる必要があります。

の拡大率

拡大機能を使用して、比例拡大機能を実現できます。以下のキャンバスには、4の矩形。キャンバスの下には、拡大レベル（拡大率）を変更するための入力フィールドがあります。

拡大度:

拡大レベルのテキストフィールドが見える場合は、1に10まで

の間の拡大レベルを見て、テキストフィールドから退出します。スライダーが見える場合は、スライダーを移動するだけでよいです。

平移、回転、拡大の組み合わせ2もちろん、3つの変換を同じキャンバスに組み合わせることができます。しかし、回転と平移を組み合わせるのと同様に、