2009-06-04 16 views
11

Có bất kỳ lựa chọn thay thế nào tốt cho canvas phần tử html5 để vẽ các hình dạng như hình lục giác bằng javascript, có hoạt động trên trình duyệt (bao gồm cả IE6 khủng khiếp) không?Vẽ các hình dạng trong Javascript

Tôi đã sử dụng jQuery và jQuery maphighlight cho điều này, nhưng nó không cho tôi đủ khả năng để thao tác các hình dạng và màu sắc sau khi nó được hiển thị đầu tiên.

Tôi có thiếu một số tính năng trong jQuery maphighlight, hoặc có plugin nào khác cho jQuery hoặc mootools, có thể cung cấp cho tôi khả năng vẽ này không?

Trả lời

25

Bạn nên xem RaphaelJS. Nó là một thư viện trình bao bọc JavaScript, trình duyệt chéo xung quanh Canvas, SVG và VML (một ngôn ngữ đánh dấu vector chỉ có trình duyệt IE có trước SVG, được sử dụng trong IE6). Sử dụng RaphaelJS, bạn có thể tạo ra rất nhiều đồ họa véc tơ bằng cách sử dụng JS tương thích với một phạm vi rất rộng các trình duyệt.

http://raphaeljs.com/

RaphaelJS cũng rất phù hợp với jQuery, và sau rất nhiều so với cùng gọi xâu chuỗi mà bạn nhìn thấy trong jQuery. Cả hai tạo nên một cặp đôi tuyệt vời.

+0

Điều này có vẻ rất hứa hẹn – elzapp

+0

Đó là một thư viện tuyệt vời. Tôi đã sử dụng nó trong nhiều dịp để tạo các biểu đồ, biểu đồ và sơ đồ dựa trên javascript đơn giản.Nó đơn giản, và không cung cấp cho bạn đầy đủ các khả năng từ Canvas, SVG và/hoặc VML ... nhưng nó đủ để nó có ích trong hầu hết các trường hợp. – jrista

+0

Điều này thật tuyệt vời và nó thực sự đóng đinh vấn đề của tôi: D – elzapp

1

Tôi luôn thích cổng prossessing thành javascript. Bạn có thể thấy rằng here rất tốt để vẽ nội dung. Có lẽ bạn có thể kiểm tra nó. Nó không phải là một addon để jquery nhưng nó là rất mạnh mẽ.

Nó sử dụng các yếu tố HTML5 Canvas dù :(

Một vài phiên bản trước nó chỉ làm việc trong các trình duyệt mới. Tôi không biết nếu nó đã được chuyển đã để những người trước đây.


Một API khác mà tôi đã tìm thấy trong đó sử dụng số div để vẽ là this one Nếu bạn muốn vẽ các nội dung giới hạn, bạn có thể sử dụng nó. Nhưng hãy cẩn thận khi số tiền vẽ tăng lên, đoạn mã HTML nhận được bit nặng

2

Hãy thử Raphael.

Raphaël hiện hỗ trợ Firefox 3.0+, Safari 3.0+, Opera 9.5+, Chrome 2.0+ và Internet Explorer 6.0+.

+0

Điều này có vẻ rất hứa hẹn – elzapp

1

Bạn có thể sử dụng triển khai SVG được tìm thấy trong Ample SDK cũng hoạt động trong Internet Explorer. Bạn sẽ nhận được API dựa trên chuẩn (DOM Cấp 2/3) và ký hiệu đánh dấu (SVG1.2 Tiny).

Dưới đây là một cặp ví dụ:

  1. SVG Tiger
  2. SVG+SMIL/DOM