Canvas 勉強中のメモ その1

Webプログラミング

Webページ上でグラフィックを扱ってみたいと思い
Canvas を全く知らないところから勉強中です。

□Canvasで何ができるの?
目標は高く設定したいので、何ができるのか見てみます。

DOOMっぽいサンプル。
Ben Joffe | Canvascape

クリックするたびに■が増えてく。重さを感じさせない。
ドラッグするとさらに増える。※Chromeで見ました
本の虫: HTML5のcanvasを使ってみた

すごい。

では基礎から勉強します。

Canvas - HTML5.JP

ここを頭から読んでみました。


□分かったことや疑問

  • CanvasはHTML5で規定された規格
  • ブラウザ上に線や円といった図形が描ける
  • 座標の概念がある 0,0が基点 X軸は右側へ、Y軸は下側へ
  • 様々なメソッドがある(線、矩形、円弧、色指定とか)
  • 文字を表示する機能の規定はあるが実装されているブラウザが無い?
  • アニメーションの機能は無い
    • え？でもみんなゲーム作ってるよね
      • 1コマずつ図を書き直す処理を繰り返すことで実現


□感想
昔のBASICみたいな感覚。LINE命令とかCIRCLE命令でお手軽に
図が描けてしまう感覚。
まず線さえ引ければあとは、リファレンスを見ながら
なんでもできそう。


□疑問
アニメーションの機能が無いというのは、スプライトが無い
という意味か。グラフィックVRAMに絵を描いて
表示VRAMを切り替えるみたいな感じなのかな。懐かしい。

Canvasの使い方 - Canvas - HTML5.JP

□を書くサンプル
http://zxcv.info/test1.html

○を書くサンプル
http://zxcv.info/test2.html

できました。

絵さえ描ければあとはどう動かすかだけです。

今日はここまでです。

アニメーションについて詳しく書いてあるページを見つけたので次はココから。
Basic animations | MDN

ではでは