canvasのアニメーションの基本的な考え方
html5 canvasで円・円弧を描画するまでで多角形や円などの図形を描画できるようになりました。 今回は描画した図形を動かしてアニメーションを行う方法を紹介します。 アニメーションの考え方アニメーションはパラパラマンガのように、微妙に違う静止画を連続で切り替えることによって動いているように見せることで表現します。 canvasでも、描画する図形を微妙に変化させながら何回も連続で再描画することでアニメーションを表現します。 ループ処理連続で描画するためには、描画処理の関数をループで何回も呼ぶ必要があります。ループ処理はsetTimeoutなどでも可能ですが、ここではrequestAnimationFrameを使用します。対応していないブラウザもあるので、以下のように定義します。 var requestAnimationFrame = ( function(){ return window
【連載】第一回HTML5でCanvasアプリを作る入門編 ~canvas関連メソッドリファレンス~ - nigoblog
前回ざっくりWEBアプリが来る!という記事を書きました。 というわけで今回はWEBアプリの作り方!特にcanvasを利用したアプリの作り方について書いていこうと思います。かなり内容は入門者向けですので、まだプログラミングを知らないという人でも記事を読みながらプログラミングが出来ると思います。 これも連載形式で書いていこうと思います。 連載が終わる頃にはcanvasでWEBアプリを作れるようになっていることでしょう! 第一回目のテーマは色々やってみようということでcanvas関連メソッドのリファレンスを書いていきます。 参考図書 canvasで出来ること canvasを使う準備 canvasで良く使うメソッド まとめ という流れで書いていきます。 参考図書 参考図書にはこちら。 HTML5 Canvas 作者: Steve Fulton,Jeff Fulton,安藤慶一出版社/メーカー: オ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
