Tôi đã tự hỏi liệu tốt hơn là tạo một hoạt ảnh như this trong canvas hoặc svg (hiệu suất khôn ngoan)? Tôi đang viết lại nó trong jquery nhưng tôi đọc ở đâu đó rằng một canvas được vẽ lại mỗi khi nó thay đổi.Hoạt ảnh SVG hoặc Canvas?
6
A
Trả lời
9
Đối với những hình ảnh động và đồ thị cảnh "đơn giản" này, việc bạn sử dụng hiệu suất SVG hoặc Canvas không thực sự quan trọng. Cả hai sẽ làm việc tốt mà không có vấn đề hiệu suất.
Tuy nhiên, việc tạo hoạt ảnh bằng SVG so với Canvas có thể dễ dàng hơn. Trong Canvas bạn phải vẽ lại toàn cảnh và trong SVG, bạn chỉ có thể tạo vòng một lần và sau đó xác định chuyển đổi (xoay) trên đó.
Đối với SVG kiểm tra d3.js hoặc raphael và cho vải bạn có thể kiểm tra processingjs, fabric.js, kinetic.js hoặc paper.js
Các vấn đề liên quan
- 1. là Raphaël sử dụng canvas hoặc svg?
- 2. Hoạt ảnh theo độ dốc SVG
- 3. Hoạt ảnh: jQuery hoặc Raphael?
- 4. Android và phát hoạt ảnh SVG
- 5. Độ mờ hoạt ảnh SVG trên vòng
- 6. Thẻ hình ảnh SVG không hoạt động
- 7. Hoạt ảnh kích hoạt SVG với sự kiện
- 8. SVG vào Canvas với d3.js
- 9. Chụp ảnh từ máy ảnh thành dạng hoặc html5 canvas
- 10. SVG rect so với div vs canvas
- 11. Hình ảnh canvas HTML5 cách có thể được lưu ở định dạng SVG hoặc 64 cơ sở?
- 12. làm thế nào để vẽ lưới bằng cách sử dụng html5 và (canvas hoặc svg)
- 13. Tại sao sử dụng canvas cho hoạt ảnh trong html5?
- 14. Lưu <svg> HTML5 vào PNG hoặc hình ảnh
- 15. Sử dụng png hoặc hình ảnh svg như nút graphviz
- 16. Làm thế nào để lặp lại chuỗi hoạt ảnh SVG?
- 17. Hoạt ảnh SVG dọc theo đường dẫn với Raphael
- 18. Vẽ đường trong Canvas với dữ liệu đường dẫn SVG (đường dẫn SVG tới đường dẫn Canvas)
- 19. Thư viện hoạt ảnh Javascript Sprite cho thẻ Canvas
- 20. Cách tạo hoạt ảnh cho đường dẫn trên canvas - android
- 21. Canvas vs SVG cho các trò chơi đơn giản
- 22. Hoạt ảnh UIImage hoặc UIImageView?
- 23. Điểm ảnh SVG trong chrome
- 24. HTML5 Canvas ảnh Scaling Issue
- 25. HTML5 tạo ảnh nền canvas
- 26. hợp nhất hình ảnh từ Raphael svg
- 27. Phương pháp chuyển đổi canvas HTML5 thành SVG?
- 28. vẽ đối tượng/hình ảnh trên canvas
- 29. Xoay ảnh. Danh sách hoạt ảnh hoặc xoay động? (Android)
- 30. Hình ảnh SVG trong ứng dụng iPhone
Khi bạn vẽ một vòng tròn hoặc một cái gì đó trong một canvas, là nó có thể để thêm một sự kiện để nó trong một Tranh sơn dầu? Và với SVG? Các ví dụ đẹp mà bạn đã gửi :) – BigChief
Cũng trong Canvas nguyên bản, không thể đính kèm sự kiện vào bất kỳ hình thức/hình dạng nguyên thủy nào. Bạn phải viết mã để phát hiện hit (kiểm tra xem vị trí chuột có nằm trong vòng tròn) không. Tuy nhiên, các thư viện canvas được đề cập ở trên có thể hỗ trợ các sự kiện trên các hình dạng vì chúng thường có một lớp trừu tượng. SVG hỗ trợ các sự kiện về hình dạng ra khỏi hộp và đó là lý do tại sao tương tác cũng dễ thực hiện hơn trong SVG so với trong Canvas. –
Được rồi, tôi nghĩ tôi sẽ sử dụng canvas với một trong các thư viện để thêm sự kiện. – BigChief