Tôi làm cách nào để sử dụng phần tử canvas HTML5 trong IE?

Question

Tôi đang cố gắng sử dụng phần tử canvas HTML5 để vẽ một số vòng cung và vòng tròn - điều này hoạt động hoàn hảo trong FF nhưng IE8 dường như không hỗ trợ nó.

Hiện tại, có các thư viện Javascript có vẻ như làm cho IE8 hoạt động tốt với Canvas. An example can be found here.

Tôi đã đọc toàn bộ nguồn của mình nhưng tôi không thể hiểu cách họ đang tạo Canvas hoạt động với IE8. Ai đó có thể ném ánh sáng lên phương pháp được sử dụng không?

Answer 1

Trang đang sử dụng excanvas - thư viện JS mô phỏng phần tử canvas bằng cách sử dụng trình kết xuất VML của IE.

Lưu ý rằng trong Internet Explorer 9, the canvas tag is supported natively! Xem MSDN docs để biết chi tiết ...

Answer 2

Bạn có thể sử dụng plugin Chrome Frame mới được phát hành cho IE nhưng yêu cầu trang web HTML 5 bao gồm thẻ meta đặc biệt cho phép plugin.

http://code.google.com/chrome/chromeframe/

Chrome Frame dường như sử dụng Khám phá Canvas (excanvas.js).

Answer 3

Hiện tại, ExplorerCanvas là tùy chọn duy nhất để mô phỏng canvas HTML5 cho IE6, 7 và 8. Bạn cũng đúng về hiệu suất của nó, điều này khá kém.

Tôi đã tìm thấy một mô phỏng hạt chuẩn xác định sự khác biệt giữa xử lý canvas HTML5 thực sự trong Google Chrome, Safari và Firefox so với ExplorerCanvas trong IE. Kết quả cho thấy rằng các trình duyệt chính hỗ trợ thẻ canvas chạy nhanh hơn từ 20 đến 30 lần so với HTML5 mô phỏng trong IE với ExplorerCanvas.

Tôi nghi ngờ rằng bất cứ ai sẽ trải qua nỗ lực tạo ra giải pháp thay thế vì 1) excanvas.js được mã hóa sạch như nó được và 2) khi IE9 được phát hành, tất cả các trình duyệt chính cuối cùng sẽ hỗ trợ đối tượng canvas. Hy vọng rằng, chúng tôi sẽ nhận được IE9 trong vòng một năm

Eric @ www.webkrunk.com

Answer 4

Bạn có thể thử fxCanvas: https://code.google.com/p/fxcanvas/

Nó thực hiện hầu hết các API Canvas trong shim flash.

Answer 5

Tôi chỉ sử dụng flashcanvas và tôi đã làm việc đó. Nếu bạn gặp phải vấn đề, chỉ cần chắc chắn để đọc các caveats và whatnot. Đặc biệt, nếu bạn tạo phần tử canvas động, bạn cần phải khởi tạo chúng một cách rõ ràng:

if (typeof FlashCanvas != "undefined") { 
    FlashCanvas.initElement(canvas); 
} 

Answer 6

Nếu bạn cần phải sử dụng IE8, bạn có thể thử thư viện JavaScript này cho đồ họa vector. Nó giống như giải quyết sự không tương thích "canvas" và "SVG" của IE8 cùng một lúc.

Raphaël

Tôi vừa thử nó trong một ví dụ nhanh chóng và nó hoạt động một cách chính xác. Tôi không biết làm thế nào dễ đọc là mã nguồn nhưng tôi hy vọng nó sẽ giúp bạn. Như họ đã nói trên trang web của mình, thư viện tương thích với những nhà thám hiểm rất cũ.

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