Giả sử tôi có đường cong được tạo bằng cách sử dụng số serie của các cuộc gọi bezierCurveTo()
. Tôi muốn làm cho nó xuất hiện dần dần trong một hình ảnh động, bằng cách tăng phần trăm của nó được rút ra khung-sau-frame. Vấn đề là tôi không thể tìm thấy một cách tiêu chuẩn để vẽ chỉ là một phần của một con đường vải - sẽ someon biết một cách tốt (hoặc thậm chí là một cách khôn lanh) để đạt được điều này?Làm thế nào để vẽ một đường dẫn một phần trong canvas của HTML5?
Trả lời
Chỉ cần tìm thấy một thư viện nhỏ mà thực hiện chính xác rằng: https://github.com/camoconnell/lazy-line-painter
Nó dựa vào lib Raphael (http://raphaeljs.com/), và cả hai cùng nhau không làm cho quá lớn một trọng tải.
Chắc chắn ... và Simon Porritt đã làm tất cả các bài toán khó cho chúng tôi!
jsBezier là một lib nhỏ với hàm: pointAlongCurveFrom (đường cong, vị trí, khoảng cách) sẽ cho phép bạn tăng dần từng điểm dọc theo đường cong Bezier của bạn.
jsBezier có sẵn trên GitHub: https://github.com/sporritt/jsBezier
Cảm ơn - tuy nhiên tôi đã thử phương pháp này (vẽ các điểm dọc theo đường cong) với các môi trường khác và kết quả là không may khá chậm do số tiền vượt quá cao. Điều này có thể được sử dụng cho đến khi một cách để sử dụng dấu gạch ngang được chuẩn hóa mặc dù (sử dụng đường đứt nét là một cách dễ dàng để đạt được hiệu ứng này). Vẫn mở cho các câu trả lời khác. – Gnurou
BTW, tôi đã không thử nó, nhưng tôi nghĩ rằng Chrome bây giờ hỗ trợ các đường đứt nét với context.setLineDash ([5]). – markE
Đúng vậy - Tôi muốn ở lại khu vực tương thích hoàn toàn mặc dù :) – Gnurou
- 1. HTML5 Canvas - Làm thế nào để vẽ một đường trên nền hình ảnh?
- 2. Làm cách nào để cắt một phần của văn bản trong canvas HTML5?
- 3. Vẽ hình dạng màu khác nhau trong một đường dẫn (HTML5 Canvas/Javascript)
- 4. Làm thế nào để vẽ phân đoạn của một chiếc bánh rán bằng canvas HTML5?
- 5. A * Tìm kiếm đường dẫn bắt đầu trong Canvas HTML5
- 6. Vẽ các đường cong đầu mũi tên trong HTML5 Canvas
- 7. Vẽ các đường nét đứt trên Canvas HTML5?
- 8. Vẽ đường trong Canvas với dữ liệu đường dẫn SVG (đường dẫn SVG tới đường dẫn Canvas)
- 9. Làm thế nào để vẽ đường lưới trên WPF Canvas?
- 10. Đột quỵ đường đôi trong html5 canvas
- 11. Làm thế nào để vẽ đường dẫn này trong WPF?
- 12. Làm cách nào để vẽ các đường Canvas HTML5 cho đầu vào của người dùng của các điểm X, Y?
- 13. làm thế nào để vẽ lưới bằng cách sử dụng html5 và (canvas hoặc svg)
- 14. Làm cách nào để vẽ đường dẫn bằng bitmap?
- 15. Làm cách nào để vẽ một đường trên canvas trong WPF có độ dày 1 pixel
- 16. Làm thế nào để có được một phần của đường dẫn với jQuery?
- 17. "Xóa" trong html5 canvas
- 18. Làm thế nào để vẽ một đường subpixel
- 19. Làm thế nào để vẽ một đường với Cocos2d-iPhone
- 20. Phần tử canvas html5 trong nền của trang của tôi?
- 21. Vẽ văn bản bằng nét ngoài với canvas của HTML5
- 22. Làm thế nào để vẽ một vòng tròn với các tiêu điểm mờ dần ở giữa với HTML5 Canvas?
- 23. Tôi làm cách nào để sử dụng phông chữ tùy chỉnh trong phần tử Canvas HTML5?
- 24. Làm thế nào để vẽ một hình chữ nhật trên một canvas WPF
- 25. Làm thế nào để vẽ đường trong các mẫu khác nhau bằng canvas?
- 26. Cách vẽ đa giác trên canvas HTML5?
- 27. Vẽ một đường đậm với DrawLine() khi mở rộng Canvas
- 28. Làm thế nào để kéo một canvas với helper 'clone'?
- 29. Đường kẻ mịn được vẽ trong canvas
- 30. Bạn làm cách nào để hiển thị một phần của SVG trong Canvas?
Câu trả lời này cho câu hỏi trước có thể hữu ích cho bạn. http://stackoverflow.com/questions/878862/drawing-part-of-a-bezier-curve-by-reusing-a-basic-bezier-curve-function – jing3142
Ồ, điều đó rất hữu ích. Thanh danh. – Gnurou