JavaScript: canvas に画像を繰り返し表示する

HTML5 Canvas API を使って、画像を繰り返し表示することができます。

Webページでも背景画像を繰り返し表示することが出来ますが、 それと同じことが canvas でも出来ます。

繰り返し表示するには createPattern() メソッドを使用します。

createPattern() メソッドの構文


createPattern(image, パターン)
パターン指定できるのは以下の４つです。
repeat水平・垂直の両方向に繰り返し
repeat-x水平方向にのみ繰り返し
repeat-y垂直方向にのみ繰り返し
no-repeat繰り返さない

サンプルコード: 画像繰り返し表示する

HTML・CSS


<canvas id="canvas"></canvas>

<style>
    canvas {
        border: 1px solid silver;
    }
</style>

JavaScript


var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');

// Image オブジェクトを生成
var img = new Image();
img.src = '../sample/img/bg_nangoku2.jpg';

// 画像読み込み終了してからパターン作成・描画
img.onload = function(){
    var pattern = c.createPattern(img, 'repeat');
    c.fillStyle = pattern;
    c.fillRect(0, 0, 300, 150);
}

読み込んだ元の画像は下の画像で、この画像を繰り返し表示しています。

コードのポイントは次の部分です。 

// 画像読み込み終了してからパターン作成・描画
img.onload = function(){
    var pattern = c.createPattern(img, 'repeat');
    c.fillStyle = pattern;
    c.fillRect(0, 0, 300, 150);
}


img.onload = function() {...}

画像の読み込みが終了してからパターンを作成し、描画します。

var pattern = c.createPattern(img, 'repeat');
c.fillStyle = pattern;

createPattern() メソッドでパターンを作成し、 作成したパターンをfillStyle プロパティに指定。 今回はパターンとして 'repeat' を指定しています。

c.fillRect(0, 0, 300, 150);

fillRect() メソッドで矩形を描画することで画像の繰り返しを実現します。

canvas には背景を設定するメソッドがありません。 その代わりとして fillRect() でキャンパスサイズと同じ矩形を描画しています。

JavaScript入門