その38。

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

今回試すサンプルは「イメージ」の「drawImage(image, dx, dy, dw, dh)」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
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, SCREEN_WIDTH, SCREEN_HEIGHT);
};

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

19行目

基本的にはその37で勉強した「 drawImage() 」そのまんまです。
違うのはパラメータが追加された分があることですね。
「 drawImage( image, dx, dy, dw, dh ) 」となっています。
追加された分は「 dw 」と「 dh 」です。

「 dw 」と「 dh 」共に指定した数値のサイズに拡大縮小を行います。
ロゴ画像のサイズは横500、縦500のサイズですので比率は1:1です。
サンプルでは X と Y 座標共に0の位置から画面サイズ縦横465に縮小しています。
画面サイズと同じ大きさに画像を縮小させたのでピッタリ表示されることになります。
これが縦だけ500としてもいいのですが比率が変わるので縦長になりますし、画面サイズより大きいので見切れることになります。
その辺は処理に合わせて調整してください。

Tweet