2012-03-11 45 views
6

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?

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

+0

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

+3

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. –

+0

Đượ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

Các vấn đề liên quan