その34。
tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編
今回試すサンプルは「色, グラデーション(Color, Gradient)」の「塗りつぶしスタイルに画像を指定してみよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
網掛けの四角形が描画されたと思います。
/*
* 定数
*/
var SCREEN_WIDTH = 465;
var SCREEN_HEIGHT= 465;
tm.main(function() {
// canvas インスタンス生成
var canvas = tm.graphics.Canvas("#world");
// 幅, 高さを指定
canvas.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
// 画面にフィットさせる
canvas.fitWindow();
// 画像読み込み
var img = new Image();
img.src = "https://raw.github.com/subtlepatterns/SubtlePatterns/master/az_subtle.png";
img.onload = function() {
// パターンを生成
var pattern = canvas.context.createPattern(img, "repeat");
canvas.fillStyle = pattern;
// 四角形を描画
canvas.fillRect(30, 30, 400, 400);
};
今回勉強するのは16～23行目です。
16行目
「 Image 」というクラスを生成しています。
tmlib.jsの特徴としてクラス生成時に「 new 」を使わないというのがあるのですがこの行には使われていますよね？
この「 Image 」はtmlib.jsで定義されているクラスではなく、JavaScriptそのものが定義しているクラスになるので
「 new 」が使われているわけです。
17行目
16行目で生成した変数(オブジェクトとも言います) 「 img 」のプロパティとして「 src 」を設定しています。
「 src 」はアドレスを設定するプロパティとなりますので画像のアドレスを指定しています。
18行目
17行目の「 img 」で指定した画像を「 onload 」で読み込んだら「 function() { } 」内の処理を実行するよう指示しています。
20行目
「 pattern 」という変数（オブジェクト）を「 canvas.context.createPattern(img, “repeat”) 」という性質を持たせて生成しています。
ドキュメントに載っていない部分もあったので半分憶測ですが
8行目で生成した「 canvas 」のプロパティとして「 context 」を指示し、
さらに「 context 」のプロパティとして「 createPattern(img, “repeat”) 」を指示しています。
ですので最後に指示された「 createPattern(img, “repeat”) 」が反映されることになります。
一つ目のパラメータとして「 img 」は17行目のアドレスが含まれた変数（オブジェクト）が、
二つ目のパラメータとして繰り返すという意味の「 repeat 」が指示されています。
簡単に要約するならば「読み込まれた画像を繰り返せ」という指示になります。
21行目
「 canvas.fillStyle 」で「 canvas 」に対して塗りつぶしで描画される矩形や円といったものに対して、20行目で設定した性質を持つように指示しています。
23行目
塗りつぶしの四角形を描画しています。
普通に描画するのと変わりませんが、21行目で塗りつぶしのスタイルが定義されていますので
画像が繰り返し適用されることになります。
