「tmlib.js 怒濤の 100 サンプル!!」を試す その37

その37。

tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編

今回試すサンプルは「イメージ」の「drawImage(image, dx, dy)」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
tmlib.jsのロゴ画像が描画されたと思います。

/*
* 定数
*/
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/phi1618/tmlib.js/0.1.3/logo.png";
img.onload = function() {
canvas.drawImage(img, 0, 0);
};

今回勉強するのは16~19行目です。

16行目

「 img 」というImageクラスを生成しています。
余談ですが、別の言い方だとImageクラスの性質を持った変数「 img 」を作成かな?

17行目

「 src 」はアドレスを設定するプロパティとなりますので画像のアドレスを指定しています。

18行目

17行目で指定した画像を読み込んだら「 function() { } 」内の処理を実行するよう指示しています。

19行目

「 drawImage() 」で読み込んだ画像を描画します。
パラメータは「 drawImage( image, x, y ) 」となっています。

image 画像のアドレス
dx 画像のX座標
dy 画像のy座標

パラメータの「 image 」は直接アドレスを指定してもいいのですが、
後にメンテナンスや変更しやすいよう変数で指定するのが一般的です。
ですのでサンプルでは「 img 」となっています。

X と Y は他の描画でも勉強してるので省略しますね。
ちなみに基準点は画像の左上です。

人生初のぎっくり腰でここ数日腰痛が…
なんとか今年中に基本の解説を終わらせたいのですが滞りがちに…


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です