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

HTML5のキャンバスとポリゴン上の画像は可能ですか？

はい、可能です。画像を使用してパターンを作成し、パターンをfillStyleに設定します。

ここで、objは画像オブジェクトです-

var context = canvas.getContext("2d");
var pattern = context.createPattern(obj, "repeat");
context.fillStyle = pattern;
任意のポリゴンに合うように画像を操作する必要があります-

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

  1. HTML5でdrawImage（）を使用して画像を描画する方法は？

    HTML5 drawImage（）メソッドは、キャンバス上に画像、キャンバス、またはビデオを描画するために使用されます。また、画像の一部を描画します。また、画像サイズを拡大または縮小するために使用することもできます。 これがdrawImage（）メソッドのパラメータ値です- Sr.No drawImage（）パラメータと説明 1 img 画像、キャンバス、またはビデオを指定します。 2 sx xクリッピングを開始する場所を調整します。これはオプションです。 3 sy yクリッピングを開始する場所を調整します。こ

  2. HTML5Canvasでパターンを作成する

    HTML5 Canvasでパターンを作成するには、次のメソッドを使用します。createPattern（image、repeatment）-このメソッドは、画像を使用してパターンを作成します。 2番目の引数は、repeat、repeat-x、repeat-y、およびno-repeatのいずれかの値を持つ文字列にすることができます。空の文字列またはnullが指定されている場合、繰り返しが想定されます。 例 次のコードを実行して、パターンの作成方法を学ぶことができます- <!DOCTYPE HTML> <html>    <head> &nb