JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5 Canvasでポリゴン上に画像を描画することは可能ですか？

HTML5 Canvasでポリゴン上に画像を描画する方法

はい、可能です。基本的な流れは、まず画像からパターンを作成し、そのパターンを fillStyle に設定するというものです。こうすることで、塗りつぶし領域全体に画像が繰り返し表示されます。

以下の例では、obj が画像オブジェクトを表しています。

var context = canvas.getContext("2d");
var pattern = context.createPattern(obj, "repeat");
context.fillStyle = pattern;

任意のポリゴンに合わせて画像を変形させる

画像を任意のポリゴン（多角形）の形状にフィットさせたい場合は、座標変換（トランスフォーム）を活用します。setTransform() で行列を指定してから drawImage() を呼び出すことで、画像の回転・拡大縮小・傾き（スキュー）などを自由に制御できます。

context.save();
context.setTransform(m11, m12, m21, m22, dx, dy);
context.drawImage(obj);
context.restore();

save() と restore() で処理を挟むことで、変換の影響が他の描画内容に及ぶのを防いでいます。各パラメータの意味は次の通りです。

  • m11〜m22： 回転・拡大縮小・せん断を決める2×2行列の要素
  • dx, dy： 水平方向・垂直方向の平行移動量

この手法を組み合わせれば、クリッピングパス（clip()）と併用して、複雑な多角形の内側だけに画像を表示させることも可能です。

  1. HTML5のdrawImage()メソッドを使ってCanvasに画像を描画する方法

    HTML5の drawImage() メソッドは、キャンバス（canvas）上に画像・別のcanvas・動画などを描画するために使用します。画像の一部だけを切り取って描画することもでき、描画時にサイズを拡大・縮小することも可能です。 drawImage()メソッドのパラメータ一覧 drawImage() メソッドで指定できるパラメータとその説明は以下の通りです。 番号パラメータと説明 1img描画対象となる画像（image）、canvas、または video を指定します。 2sxクリッピング（切り抜き）を開始するx座標。省略可能です。 3syクリッピングを開始するy座標。省略可能です

  2. HTML5 CanvasでcreatePatternを使ってパターンを作成する方法

    HTML5 Canvasでは、createPattern(image, repetition)メソッドを使用することで、画像をもとにしたパターンを簡単に作成できます。このメソッドは、塗りつぶしや線描のスタイルとして利用できるパターンオブジェクトを返します。createPatternメソッドの基本構文第1引数にはパターンの元となる画像（Image要素、Canvas要素など）を指定します。第2引数には繰り返し方法を表す文字列を指定します。repetitionに指定できる値repeat … 縦横両方向にパターンを繰り返します（デフォルト）repeat-x … 水平方向のみ繰り返しますrepeat-y