【Canvas】画像を縦横方向にリピートして繰り返し表示する

こんにちは、Ryohei（@ityryohei）です！

本記事では、HTML5のCanvasで画像を縦横方向にリピートして繰り返し表示する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

Canvasを作成する

Canvasを作成します。Canvasはcanvasタグを使用して作成することができます。下記では、id、width、heightの属性を設定しています。

HTML

<div id="app">
    <canvas id="canvas" width="500" height="250"></canvas>
</div>

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

実行結果

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

これでCanvasを作成することができました。上記はまだ何も描画されていない真っ新な状態です。次項で作成したCanvasに画像をリピートして繰り返し表示していきます。

Canvasに画像を縦横方向にリピートして繰り返し表示する

Canvasに描画する対象をリピートして繰り返し表示する場合は、Canvas 2D APIのメソッドのcreatePattern()を使用します。createPattern()は下記の方法で呼び出します。

ctx.createPattern(image, repetition);

引数には下記を指定します。

image	パターンとして使用するオブジェクトを指定します。本記事では画像を使用するためImageオブジェクトを指定します。
repetition	繰り返し方法を指定します。値には下記を指定することができます。 ・repeat：縦横方向にリピート ・repeat-x：横方向にリピート ・repeat-y：縦方向にリピート ・no-repeat：リピートしない

では実際にcreatePattern()を使用して、作成したCanvasに画像を縦横にリピートして繰り返し表示してみます。Imageオブジェクトを生成してcreatePattern()にて画像をリピートするところまで作成します。JavaScriptのソース内にコメントを記載していますので、カスタマイズされる場合に参考にしていただければと思います。

HTML

<div id="app">
    <canvas id="canvas" width="500" height="250"></canvas>
</div>

JavaScript

//Canvasを取得
const canvas = document.getElementById('canvas');
//Canvasに描画するコンテキストを取得
const ctx = canvas.getContext('2d');
//Imageオブジェクトを生成
const image = new Image();

//Imageオブジェクトに画像ファイルを指定
image.src = 'sample.png';

//Imageオブジェクトの画像の読み込み完了後に実行
image.onload = ()=> {
    //図形のスタイルにcreatePatternの内容を指定
    ctx.fillStyle = ctx.createPattern(image, 'repeat');
    //図形のサイズ内をfillStyleの内容で描画する
    ctx.fillRect(0, 0, 500, 250);
}

実行結果

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

最後に

久しぶりのCanvasに関する投稿です。Canvasは実務でもたまに使用するケースがありますが、Canvasを使用すると指定した場所に簡単にオブジェクトを描画することができる点と、HTMLを触らずにJavaScriptで制御できるのは利点ですよね。今後もCanvasの内容を充実させていきたいと考えていますので、隙間時間で勉強を進めたいと思います！

以上、HTML5のCanvasに画像を縦横方向にリピートして繰り返し表示する方法のご紹介でした！