Japanese subtitles

← PS 03-05 Loading images

Get Embed Code
8 Languages

Showing Revision 1 created 03/13/2014 by Fran Ontanaya.

  1. GRITSでのCanvasのインタラクションは
    ほとんど画像のレンダリングです
  2. Canvasに描画するためには
    まず画像を読み込む必要があります
  3. そのため新たにJavaScriptで
    画像オブジェクトを作ります
  4. 手順は3つです
    まずは画像オブジェクトを決めます
  5. 次にonload関数の定義です
  6. 最後に画像のURLをセットします
    画像のソースプロパティがセットされると
  7. すぐにJavaScriptがonload関数を
    機能させるので注意が必要です
  8. そのためURLをセットする前に
    コールバック関数を定義する必要があります
  9. そうしないと画像を読み込んでも
    コールバック関数を呼び出せません
  10. ではコードを見てみましょう
    これは読み込む画像のURLです
  11. 先ほどの手順に従って画像オブジェクトを作成し
  12. onload関数とソース画像をセットします
  13. onImageLoadにonload関数を割りあてると
    コンソールにメッセージが出るので
  14. きちんと画像が読み込まれたとわかります
  15. 画像の読み込みの状態を確認したいときは
  16. Chromeデベロッパーツールを使いましょう
  17. 画像の読み込みにかかる時間も把握できます