JavaScript: canvas に画像を繰り返し表示する
HTML5 Canvas API を使って、画像を繰り返し表示することができます。
Webページでも背景画像を繰り返し表示することが出来ますが、 それと同じことが canvas でも出来ます。
繰り返し表示するには createPattern() メソッドを使用します。
createPattern() メソッドの構文
createPattern(image, パターン)
パターン指定できるのは以下の4つです。
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() でキャンパスサイズと同じ矩形を描画しています。