にわとりになる日まで

ひよこな大学生のブログ

Canvasで遊ぼう

どうも、うじまるです

adventar.org

14日目の記事です。

寒いですね

ということでCanvasで遊びたいと思います

Canvasとは?

グラフィックを描く方法を提供してくれるAPIです。2DやWebGLを使って3Dも描画できるスグレモノです。

今回は2Dの描画で遊びたいと思います。

Canvasの基礎

  1. Canvas要素を取得します。document.getElementById('id')とかで取得するといいでしょう。
  2. Contextを取得する。canvas.getContext('2d')とすると2D描画用のContextが取得できます。
  3. Contextを使って描画する。色々なメソッドを使って描画をしていきます。

基本はこれだけなのであとはお絵かき!!

アニメーションをさせたい!!

アニメーションをさせたいというパターンがあると思います。

そういうときはどうすればいいでしょうか?

パラパラ漫画を思い浮かべてもらえるといいのですが、アニメーションを何分割かしてそれをフレームごとに描画という手法をとります。

プログラム的に言うと、計算結果を描画 → 数秒後、全体を削除してから再度計算結果を描画 ・・・

というようなループを繰り返しているとアニメーションのある絵がCanvasで描画することができます :clap:

Buffer的な使い方

アニメーションは上のようなやり方でできると分かったのですが以下のような例を考えてみましょう。

  • たくさん描画するけど一度描画したら一度も動かない物
  • 少ししか描画されないが動きがあるもの

この2種類を描画したいと思います。さっきのように単純に再描画を繰り返しているとオブジェクト数が増えていくたびに再描画が重くなっていきます。

そこで たくさん描画するけど一度描画したら一度も動かない物 を一度だけ 別のCanvas に描画してそれを毎フレーム更新するCanvasに描画するようにしてみます。

要するに一度も動かないオブジェクトを描画するCanvasをBufferの用につかうことで描画回数を減らすことができます。

これをうまく使うと・・・

こんなのができます!!

基本的にやってることは上の3つだけなのでみなさんもCanvasで遊んでみてください! 万有引力のシミュレーションとか波のシミュレーションをやると結構楽しいですよ!!