保存後のアニメーションフレームに再描画されるのの内容？

StackOverflow https://stackoverflow.com/questions/1067320

  •  21-08-2019
  •  | 
  •  

質問

私は、高価な計算が必要<canvas>上のグラフを描いています。グラフは不変である（キャンバス上でマウスを動かしたときに）私はアニメーションを作成したいのですが、いくつかの他のオブジェクトがその上に描かれています。

キャンバスは多くのことを再描画する必要がありますので、私はフレーム毎にグラフを描画するために計算を実行する必要はありません。どのように私は、一度、グラフを描き、それを保存し、保存された高価な計算は一度だけ起こる＆Iは、再描画する必要があり、すべてがはるかに簡単なアニメーションレイヤであるためにあるように、アニメーションの後続のフレームを再描画するためのレンダリングを使用することができますか？

私は2番目のキャンバス上でグラフを描画＆メインキャンバスにレンダリングするctx.drawImage()を使用してみましたが、それはDOM＆いないdisplay:none;でいない限り、キャンバスの上に描画して動作するようには思えません。私は一時キャンバスビューの外に位置のようなハック何かをする必要があり、またはこれを行うにクリーンな方法はありますか？

役に立ちましたか？

解決

アニメーション形状で、（絶対的に位置、同じサイズを有する）第一の上部に、複雑な描画を有するもの、及び第二の

あなたは、少なくとも2つのキャンバスを使用する必要があります。この方法は、IE上で動作する、とgetImageDataはExCanvasでは動作しません。

キャンバス上で複雑な図面を行い、すべてのライブラリは、この方法（FLOTなど）を使用します。

<div style="width: 600px; height: 300px; position: relative;" id="container">
  <canvas class="canvas" style="position: absolute; left: 0px; top: 0px;" width="600" height="300"/>
  <canvas class="overlay" style="position: absolute; left: 0px; top: 0px;" width="600" height="300"/>
</div>

他のヒント

どのようにあなたのキャンバス上にグラフ初めての描画について、その後、

var imdata = ctx.getImageData(0,0,width,height);

し、

ctx.putImageData( imdata, 0,0);

レンダリングの残りの部分でます。

私は flot.js のグラフ作成ライブラリにいくつかの変更をしなければなりませんでした。私はそれが重複キャンバスを使用していることを99％確信しています。チャート層とオーバーレイ層があります。あなたは、ソースコードを見ることができます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top