【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入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら