2

描かれている円をアニメーション化しようとしています-これは私がやっていることの簡略化されたバージョンです:

http://jsfiddle.net/DQz37/1/

問題は: 各線分の間にわずかな線や歪みが発生することです。このような：

セグメント間のギャップ

私が扱っている制約は次のとおりです。

  • 同じキャンバスに複数の円をレンダリングする必要があり、円が重なることがあります
  • 透明度/RGBAカラーリングを使用して円をレンダリングする必要があります
  • 円のレンダリングをアニメーション化する必要があります (円が描かれているように見えます)

これはよくある問題ですか？この種のことをどのように処理しますか？

4

2 に答える 2

6

これを修正する簡単な方法の 1 つは、常に 1 つのパスを描画することです。

したがって、A から B に弧を描き、次に B から C に弧を描き、次に C から D に弧を描く代わりに、A から B に弧を描き、キャンバスをクリアし、A から C に弧を描き、キャンバスをクリアし、A から D に弧を描きます。

例として、変更されたコード ビットを次に示します。

http://jsfiddle.net/ZV7rv/

編集:コメントに応じて、キャンバス バッファーを使用して以前のキャンバスと同じ状態を維持しながら、同じことを達成する方法を次に示します。

http://jsfiddle.net/7vVBC/

于 2012-05-28T02:37:56.133 に答える
0

基本的に、2つのパスを作成し、継ぎ目なしで完全に結合する必要がありますが、それは機能しません。または、運が良ければ1つのブラウザーで機能し、別のブラウザーでは機能しない可能性があります。これは、アンチエイリアスアルゴリズムがまったく同じように実装されていないか、ハードウェアアクセラレーションされて、ビデオカードに渡される可能性があるためです。

ヒント：アンチエイリアスを無効にすることはできません。

プログラマーとして、あなたは簡単ではない、または便利ではないあらゆる種類の問題に遭遇し続けます、そしてその瞬間にあなたは少し後退してあなたの選択を再評価する必要があります。これはそのうちの1つです。

指定した制約の唯一のオプションは、各フレームですべてを再描画するか、アルファを使用せず、アンチエイリアスのためにスペースがないことを確認するためにセグメントを少しオーバーラップすることです。

于 2012-05-28T14:37:50.587 に答える