html - キャンバス描画効果

Question

単純なものから複雑なものまでのキャンバススクリプトから始めています。円を描きたいです。簡単だ。問題は、円がすぐに描かれることです。円をゆっくりと成長させたい場合はどうなりますか（たとえば、垂直線から半円、半円、完全な円に）これを（ネイティブに）行う方法はキャンバスにありますか、それとも作成する必要がありますか？効果をシミュレートするためにいくつかの円を（すばやく）構築および削除する関数？

後者が当てはまる場合、私が注目すべきパフォーマンスのヒットはありますか？

ありがとうございました！

Answer 1

animate.jsライブラリを確認してください。それはまさにあなたが必要とするものです。使い方はjQueryUIと同じです。

必要なことは、次のコードで実行できます。

canvas_element.animateCircle(x,y,r);

& のような他のオプションのパラメーターがありますanimateCircle(x,y,r,{'lineWidth':5, 'lineColour':'red', 'stop': function() {alert('completed');}})。詳細については、Readme ファイルを確認してください。

Answer 2

キャンバスを使用するあらゆる形式のアニメーションでは、キャンバスをクリアして、シーケンス内の次の描画を作成する必要があります。Mozilla Development Network には、キャンバスとキャンバス アニメーションに関する優れたチュートリアルがあります。