2009-09-17 16 views
14

Tôi tìm thấy một thư viện vector trên Internet mà thậm chí làm việc với IE6!Điều nào tốt hơn và tại sao? RaphaelJS hoặc HTML5 Canvas?

http://raphaeljs.com/index.html

Thật tuyệt vời.

Bây giờ câu hỏi của tôi là tốt hơn so với HTML5 < canvas sắp tới >? Lý do duy nhất tôi hỏi là nó có thể là nhiều năm trước khi Microsoft triển khai <canvas> mà không yêu cầu một plugin để nó chạy.

Và sẽ còn lâu hơn nữa cho đến khi tất cả người dùng IE trên Internet loại bỏ các trình duyệt cũ của họ để chúng tôi có thể biện minh bằng cách sử dụng canvas > HTML5 <.

Tôi là tất cả về việc tuân thủ các tiêu chuẩn, nhưng điều này chỉ mất quá nhiều thời gian, nhờ sự phát triển chậm của MS đối với trình duyệt của họ.

Suy nghĩ?

+0

Bạn không tham gia bằng cách nào đó trong dự án, phải không? Điều này nghe có vẻ như một Rah! Rah! đăng, không phải là một câu hỏi. –

+0

@ T.J. Không, tôi chỉ tìm thấy nó trên Internet. Và tôi đã thực sự thất vọng với việc chờ IE bắt kịp tất cả các trình duyệt khác. – leeand00

Trả lời

20

Raphael là thư viện đồ họa vector, được thực hiện bằng SVG, trong khi HTML5 canvas là đồ họa bitmap.

Nếu bạn muốn làm đồ họa véc tơ, tôi nghĩ rằng với Raphael có lẽ là một lựa chọn tốt trên "chỉ" vải. Như bạn nói, canvas không hoạt động tốt với IE và có thể sẽ mất một lúc trước khi nó được hỗ trợ nguyên bản. Nếu Raphael thực hiện những gì bạn cần, không có lý do cụ thể nào để không sử dụng nó. Hãy lưu ý rằng cũng có các thư viện khác cho điều này: Excanvas, mô phỏng vải cho IE bằng cách sử dụng VML (theo như tôi biết), và một số người khác cũng làm như vậy với Silverlight và Flash nhưng tôi quên tên của họ.

Ngoài ra còn có Dojo, có một thành phần để tóm tắt sử dụng canvas phía sau giao diện dễ sử dụng, cũng hỗ trợ IE.

Có canvas gốc trong tất cả các trình duyệt sẽ không làm cho thư viện lỗi thời, vì các thư viện thường trừu tượng một số độ phức tạp của canvas, giúp việc sử dụng dễ dàng hơn.

+5

Hiệu suất là sự khác biệt lớn. SVG làm chậm rất nhiều nếu có nhiều nút để vẽ. Đây là một kết quả vốn có của SVG hoạt động như thế nào. Hiệu suất Canvas HTML5 chủ yếu được xác định bởi tổng số pixel cần vẽ lại (chiều rộng x chiều cao). – Jacco

+0

@Jacco - điểm tuyệt vời - mọi thứ thực sự bắt đầu nói lắp với SVG nếu bạn cố gắng làm sống động nhiều thứ (ví dụ: trường sao) - Canvas có thể xử lý tốt hơn nhiều. –

5

SVGWeb (http://code.google.com/p/svgweb/) bởi Google là những gì bạn muốn. Nó làm cho IE tương thích với SVG, đó là tiêu chuẩn và tất cả các trình duyệt chính khác đã hỗ trợ. Nói cách khác, như google nói, "Sử dụng thư viện cộng với hỗ trợ SVG bản địa, bạn có thể ngay lập tức nhắm mục tiêu ~ 95% cơ sở web đã cài đặt hiện tại."

5

Và bạn có thể sử dụng http://code.google.com/p/explorercanvas/ triển khai Tiêu chuẩn Canvas HTML5 trong IE. Tất cả bạn cần làm là thêm:

<head> 
<!--[if IE]><script src="excanvas.js"></script><![endif]--> 
</head> 

Sự khác biệt giữa Canvas và SVG được giải thích như sau:

SVG và vải không thực sự công nghệ thay thế cho nhau. SVG là một loại đồ họa chế độ giữ lại trong đó mọi thứ được vẽ từ một mô hình trừu tượng thay vì (tài liệu SVG). Mặt khác, Canvas là loại đồ họa chế độ tức thì, trong đó có không có mô hình và khách hàng (JavaScript) phải quản lý vẽ lại, hoạt ảnh, v.v.

4

Câu trả lời phụ thuộc vào những gì bạn cần:

  • nếu bạn cần thêm xử lý sự kiện cho các đối tượng đồ họa: bạn cần phải sử dụng SVG. Khác Canvas.

  • nếu có sự kiện nào là cần thiết là hiệu suất quan trọng: nếu có thì Canvas 5.

Lưu ý rằng IE 9 hỗ trợ Canvas và cung cấp nhiều hỗ trợ HTML 5 so sánh với các trình duyệt khác!

+1

Sự kiện có thể dễ dàng được xử lý trong HTML5 Canvas. – Jacco

+0

Bản thân canvas sẽ phản hồi các sự kiện nhấp chuột; tuy nhiên, bạn sẽ cần phải theo dõi các vị trí đối tượng theo cách thủ công. Tuy nhiên, các thư viện như [KineticJS] (http://www.kineticjs.com/) trợ giúp và làm cho Canvas dễ sử dụng như Raphael. – btown

0

đang tìm kiếm "raphael vs canvas" bài đăng ở đây là 5 tuổi. Có điều gì chaneged kể từ đó? Raphael có bị ám ảnh không?