html - HTML5 で曲線の破線矢印を描画してアニメーション化する方法

Question

私の目標は、html5 キャンバスで、このような曲線の矢印を作成することです。

線の描画方法に関するリソースをいくつか見つけましたが、どれも機能していないようです。関連するスタックオーバーフローの投稿も見つけました。

また、おそらく弾性効果を使用して、矢印を展開するためにホバー時にアニメーション化することは可能ですか?

Answer 1

Raphael と canvas には、ペンと紙のスタイルで線を描くことに関して、いくつかの制限があります。 このようなことをシミュレートする最善の方法は、次のフィドルのように、1 ピクセルのパスをターゲット パスに繰り返し変換することです: http://jsfiddle.net/zPRha/31/パスに沿った最後の 2 点間の角度を計算し、矢印パスを変換/回転して、描画された線に一致させます。これは理想的な解決策ではありませんが、うまくいくでしょう。

Raphael の組み込みのホバー サポートにより、ズーム/ズーム解除が非常に簡単になります。一部のキャンバス ライブラリがこの懸念を自動化したと確信していますが、このような処理はキャンバスをネイティブに使用するとかなり鈍くなると私は理解しています。

オプションで矢印をサポートする更新されたフィドルを次に示します: http://jsfiddle.net/kevindivdbyzero/JPqXF/

Answer 2

この種のことを行うには、CSS3トランジションでSVGを使用する必要があると思います。