如何畫一個曲線，虛線箭頭與HTML5和動畫它

Question

我的目標是創建一個彎箭頭像這樣的，一個HTML5的畫布：如何

我發現了很多資源，畫線，但他們似乎沒有工作。我還發現一個相關的stackoverflow post。

另外，是否有可能在懸停時爲其設置動畫效果以擴展箭頭，使用彈性效果可能？

Answer 1

拉斐爾和帆布在紙筆風格中畫線時都有一些限制。我發現模擬這種事情的最好方法是迭代地將1像素路徑轉換爲目標路徑，就像這個小提琴一樣：http://jsfiddle.net/zPRha/31/通過一些工作，您可以計算沿着路徑的最後兩個點之間的角度並轉換/旋轉箭頭路徑以匹配繪製的線條。這不是一個理想的解決方案，但它會起作用。

拉斐爾內置的懸停支持使得縮放非縮放非常容易。我的理解是，這種處理在本地使用畫布會更加鈍，儘管我確信一些畫布庫已經自動消除了這種擔憂。

這裏是一個更新的擺弄着一個箭頭可選支持：http://jsfiddle.net/kevindivdbyzero/JPqXF/

Answer 2

我想你應該使用SVG和CSS3轉換來做這種事情。