比方說,我使用一系列bezierCurveTo()
調用創建了曲線路徑。我想讓它在動畫中逐漸出現,通過增加幀 - 幀後繪製的百分比。問題是,我找不到一個標準的方法來繪製畫布路徑的一部分 - 有人會知道一個好方法(或者甚至是一個棘手的方法)來實現這一點?如何在HTML5的畫布中部分繪製路徑?
5
A
回答
2
剛剛發現了一個小庫,正是這麼做的:https://github.com/camoconnell/lazy-line-painter
它依靠拉斐爾LIB(http://raphaeljs.com/),和兩個放在一起不作太大有效載荷。
2
當然...... Simon Porritt爲我們做了所有艱難的數學!
jsBezier是一個小函數庫,它有一個函數:pointAlongCurveFrom(曲線,位置,距離),可以讓您逐漸繪製沿着貝塞爾曲線的每個點。
jsBezier可以在GitHub上:https://github.com/sporritt/jsBezier
相關問題
- 1. HTML5畫布繪製
- 2. 在畫布上繪製曲線路徑?
- 3. 如何在android中繪製路徑到畫布中?
- 4. 如何翻轉在HTML畫布上繪製的路徑
- 5. HTML5畫布繪製圖像
- 6. 在控制檯上繪製HTML5畫布
- 7. 如何在HMTL5畫布上繪製矩形時清除路徑
- 8. 如何繪製路徑機器人在畫布上
- 9. html5畫布 - 按路徑動畫對象
- 10. 在路徑繪製不同顏色的形狀(HTML5畫布/ JavaScript)的
- 11. 如何用HTML5畫布繪製甜甜圈的分段?
- 12. 使用HTML5畫布繪製圓形部分 - Math.PI
- 13. 如何繪製svg路徑動畫
- 14. 在Android應用程序中未繪製到畫布的路徑
- 15. html5動畫畫布已繪製元素
- 16. HTML5 - 超時後在畫布上繪製
- 17. 在HTML5畫布上繪製虛線?
- 18. C#:僅繪製一部分路徑
- 19. 如何normlize路徑(形狀),以填補其在HTML5畫布
- 20. 如何在HTML5畫布中剪輯文本的一部分?
- 21. 如何在html5畫布上繪製移動的重複圖案
- 22. 如何使用畫布繪製HTML5中的1/4圈圈
- 23. 安卓繪製曲線路徑動畫畫布
- 24. HTML5畫布繪製地形設置
- 25. HTML5畫布繪製多彩線
- 26. 使用HTML5畫布繪製方程
- 27. 繪製單個像素線HTML5畫布
- 28. HTML5和畫布繪製餅圖
- 29. 觸摸繪製事件和HTML5畫布
- 30. HTML5畫布DrawImage沒有繪製圖像
對上一個問題的回答可能對您有用。 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