javascript - 2Dキャンバスにパターンを描く方法を繰り返す

Question

context.fillRect（）メソッドを使用して画像を描画するメソッドがあります。この画像はサイズが小さい（長さ15ピクセル）ため、x軸とy軸に沿ってタイル形式で繰り返し描画する必要があります。

幅700ピクセル、高さ500ピクセルのキャンバスを埋めることです。

これは、context.createPattern（）メソッドを使用して実行できますか？どのように？

Answer 1

使う秘伝のタレcontext.createPatternはcontext.fillStyle本場です。

最初にパターンを作成し、次にそのパターンを に割り当て、context.fillStyle最後に を使用context.fillRectしてパターンを描画します。

// assuming img is loaded...
var ptrn = ctx.createPattern(img,'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0,0, canvas.width,canvas.height);

MDN に完全な例があります。