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

こんにちは、ryohei(@ityryohei)です!

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

Canvasで画像を繰り返し表示したいんだけど、良い方法ないかな?

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

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

Canvasを作成する

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

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に画像を縦横方向にリピートして繰り返し表示する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍