如何在HTML5的畫布中部分繪製路徑？

比方說，我使用一系列bezierCurveTo()調用創建了曲線路徑。我想讓它在動畫中逐漸出現，通過增加幀 - 幀後繪製的百分比。問題是，我找不到一個標準的方法來繪製畫布路徑的一部分 - 有人會知道一個好方法（或者甚至是一個棘手的方法）來實現這一點？如何在HTML5的畫布中部分繪製路徑？

來源

2013-03-02 Gnurou

對上一個問題的回答可能對您有用。 http://stackoverflow.com/questions/878862/drawing-part-of-a-bezier-curve-by-reusing-a-basic-bezier-curve-function – jing3142 2013-03-04 11:30:38

哦，這是非常有益的。榮譽。 – Gnurou 2013-03-04 14:38:56

剛剛發現了一個小庫，正是這麼做的：https://github.com/camoconnell/lazy-line-painter

它依靠拉斐爾LIB（http://raphaeljs.com/），和兩個放在一起不作太大有效載荷。

來源

2013-03-04 15:02:42 Gnurou

當然...... Simon Porritt爲我們做了所有艱難的數學！

jsBezier是一個小函數庫，它有一個函數：pointAlongCurveFrom（曲線，位置，距離），可以讓您逐漸繪製沿着貝塞爾曲線的每個點。

jsBezier可以在GitHub上：https://github.com/sporritt/jsBezier

來源

2013-03-02 04:19:51 markE

謝謝 - 但是我嘗試過這種方法（繪製沿曲線的點）與其他環境，結果不幸的是相當緩慢，因爲高透支。這可以使用，直到使用破折號的方式獲得標準化（使用虛線是實現這種效果的簡單方法）。仍然開放給其他答案。 – Gnurou 2013-03-02 06:16:26

順便說一句，我還沒有嘗試過，但我認爲Chrome現在支持與context.setLineDash（[5]）的虛線。 – markE 2013-03-02 06:25:11

沒錯 - 我想留在完全兼容的區域:) – Gnurou 2013-03-02 06:42:23

如何在HTML5的畫布中部分繪製路徑？

回答

相關問題