HTML5 キャンバス タイル コードの詳細な説明

私は最近ウェブサイトのプロジェクトに取り組んでおり、キャンバスをたくさん使用しています。キャンバス内に画像を描画するための要件が​​あります。画像は比較的小さいので、背景としてタイリング効果が必要です。画像。 PS(背景画像の高さと幅は10px、描画されるキャンバスの高さと幅は200pxです)

もともとdrawImageで描画したので、一つの方法を使いました

var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var img = new Image();
//需要平铺的图片
img.src = "test1_bg.jpg";
img.onload = function (){
    var can = document.createElement("canvas");
    can.width = 10;
    can.height = 10;
    var ctx2 = can.getContext("2d");
    ctx2.drawImage(img,0,0,10,10,0,0,10,10);
    ctx.fillStyle = ctx.createPattern(can,"repeat");
    ctx.fillRect(0,0,200,200);
}

高さと背景画像の幅が 10 だったのですが、これは少し面倒でした。1 ステップでどうでしょうか。ということで、こんな感じに変更しました

var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var img = new Image();
//需要平铺的图片
img.src = "test1_bg.jpg";
img.onload = function (){
    var pat = ctx.createPattern(img,"repeat");
    ctx.rect(0,0,200,200);
    ctx.fillStyle = pat;
    ctx.fill();
}

GOOD!
createPattern の定義を繰り返してみましょう

createPattern() メソッドは、指定された要素を指定された方向に繰り返します。
要素には、画像、ビデオ、またはその他の 要素を指定できます。
繰り返し要素を使用して、長方形、円、線などを描画/塗りつぶすことができます。

JavaScript 構文:

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

パラメーター 説明

繰り返し	デフォルト。使用する画像、キャンバス、またはビデオ要素を指定します。
repeat-x	このパターンは水平方向にのみ繰り返されます。
repeat-y	パターンは垂直方向にのみ繰り返されます。
no-repeat	このパターンは 1 回のみ表示されます (繰り返されません)。

以上がHTML5 キャンバス タイル コードの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。