画像を背景として設定する(createPattern) [html5 の Canvas を使ってみる：第卅三回]

createPattern(); では指定した画像を css の background-image のように配置できるらしい。

★今回並べる画像

★html 側

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

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: createPattern で 2 次元描画を行うことの定義
  var c = document.getElementById("createPattern").getContext('2d');

// drawImage(); で画像を配置
  var target = new Image();
  target.src = "pattern.png?" + new Date().getTime();
  target.onload = function() {
// 変数 target で指示した画像を
// 変数 img にパターンとして定義
// 引数の 2 つめの空は repeat と同義
    var img = c.createPattern(target, "");
// パターン定義した img を fillStyle として定義
    c.fillStyle = img;
// 指定されたパターンが見える範囲を定義
// ここでは rect(); で矩形を定義
    c.rect(10, 10, 100, 100);
    c.fill();
  }
}

すると、こうなる。矩形などをパターンで塗りつぶすのではなく、パターンを見せる範囲をあとから矩形などで定義するようだ。


次に空だった 2 つめの引数に repeat-x を入れてみる。

// x 軸のみへの繰り返し
var img = c.createPattern(target, "repeat-x");

今度は repeat-y を入れてみる。

// y 軸のみへの繰り返し
var img = c.createPattern(target, "repeat-y");

次に no-repeat を入れてみる。

// パターン画像の繰り返しなし
var img = c.createPattern(target, "no-repeat");

最後に repeat を入れ、空だった最初の例と同じになるか試してみる。

// パターン画像を繰り返す
var img = c.createPattern(target, "repeat");

確認環境：
Safari 5.0、Chrome 5.0.375.70、Opera 10.53

正常に動作しなかった環境：
Firefox 3.6.3

W3C；
4.8.11 The canvas element — HTML 5