キャンバスへの描画

公開日:2020-08-29
最終更新日:2020-09-15

ページが読み込まれたときに,キャンバスにタイトル画像が描画されるようにしてみましょう.

まずは,画像ファイルを用意します.staticディレクトリにimagesディレクトリを作成してください.つまり,下記のディレクトリを用意します.

static/images/

画像ファイルはこのディレクトリの中に置くことにします.本チュートリアル用に,タイトル画像title.bmpと背景画像background.bmpを用意しました.それぞれダウンロードし,上記のディレクトリに置いてください.

つづいて,templates/touch/index.html{# --- files --- #}の部分に下記のコードを追加してください.

static/js/main.jsに下記のコードを記述してください.

ブラウザで下記のURLにアクセスしてみましょう.

http://localhost:8000/touch/

すると,「Touch, touch, touch!」と書かれたタイトル画像が表示されました.

それでは,ページが読み込まれてから,タイトル画像が描画されるまでの流れを追ってみましょう.まず,このページ(index.html)が読み込まれたとき,46行目の$(function() {...})が呼ばれます.ここで,init()関数を呼び出しています.

init()関数ではキャンバス要素を取得しています.キャンバス要素の取得には,document.getElementById()メソッドを用います.ここでは,引数に"a_canvas"を与えることで,index.htmlで作成したキャンバスを指定しています.取得したキャンバス要素をグローバル変数canvasに格納しています.

つづいて,キャンバス要素から描画用のコンテキストを取得しています.コンテキストの取得には,canvas.getContext()メソッドを用います.引数の"2d"は,2次元(2D)描画用のメソッドを取得するという意味です.取得したコンテキストをグローバル変数contextに格納しています.

25-26行目では,タイトル画像のImageオブジェクトを生成しています.titleImage = newImage()とすることで,Imageオブジェクトを生成し,titleImage.srcindex.htmlで定義したtitleSrcをセットすることで,タイトル画像ファイルimages/title.bmpを読み込んでいます.画像の読込みが完了すると,titleImage.onloadに指定した関数が呼ばれます.つまり,28-29行目が実行されます.ここでは,明示的にコンソールに「ロード完了」と出力し,drawTitle()関数を呼び出しています.drawTitle()関数では,先に取得した描画用コンテキストcontextを用いて,タイトル画像を描画しています.ここで,画像の読込みが完了する前に,画像を描画しようとすると正しく表示されない可能性がありますので注意してください.

32-36行目では,同様に,背景画像のImageオブジェクトを生成しています.これについては,今回は読込みだけで描画はしていません.