Q&A
canvasでアニメーションをするときの流れは
canvasに描画する関数の中で、clearRect()で画像を消して、1フレームの描画をすることを繰り返す（setTimeout等で）ことになりますよね。
このとき、1から全てを描画しなおさなくてはいけないのでしょうか？例えば、背景的な描画は初めに書いたら保存しておいて、各フレームの描画では保存しておいた背景的なを読み込むだけ。。みたいな感じの機能は無いでしょうか？
今作っているのはグラフがアニメーションするようなものなんですが、座標軸やグリット線を毎回描画するのは処理として無駄な気がして質問しています。
回答4件
0
ベストアンサー
saveメソッドとrestoreメソッドが使えるかもしれません。
save(), restore() メソッド - Canvasリファレンス - HTML5.JP
他にも、「座標軸やグリット線だけを描画したcanvas要素」を別で用意しておき、再描画時にdrawImageメソッドで「表示するcanvas要素」に描画するという方法も使えるかもしれません。
「座標軸やグリット線だけを描画したcanvas要素」は、CSSで非表示にしておきます。
投稿2016/01/22 00:38
総合スコア697
0
jCanvasというJavaScriptのライブラリがありまして、それにレイヤーというものがあります。これがまんまお望みのものかと。
もちろん自力で実装できなくはないでしょうが、jcanvasを使うのをおすすめします。
投稿2016/01/23 07:45
総合スコア5852
0
canvas splite
検索で、ギヒョウのhtml5で作る〜っていうページを参照。
アニメーションさせる駒1個のことを splite スプライト って言います。
とりあえず splite と何かのキーワードで一杯参考になるページが検索できるので覚えておいてください。
投稿2016/01/20 02:13
総合スコア1693
0
HTML の Canvas は最近触っていないので、あまり詳しくないのですが、アニメーション処理をする際には、表面の Canvas に対して直接描画すると、重い描画処理ではちらつきが発生する事があるため、それを防止する目的で、裏で最終的な画像を用意してから１フレーム毎に画像を差し替えて１度で描画する方法『ダブルバッファリング』やそれに類似する方法を使ったりしませんか？
裏で背景や組み合わせたパーツを確保しておいて、作業用のバッファにそれを重ねあわせて描画していくのは、平面で表現されたゲームなんかでは特によく使う手法だと思われますので、その手のライブラリであればサポートする機能があると思いますから、そういったものが参考にできるのではないでしょうか？
投稿2016/01/19 13:15
総合スコア433
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。