Wie kann ich das HTML5-Canvas-Element im IE verwenden?

74

Ich versuche, das HTML5-Canvas-Element zum Zeichnen einiger Bögen und Kreise zu verwenden - dies funktioniert perfekt in FF, aber IE8 scheint es nicht zu unterstützen.

Jetzt gibt es Javascript-Bibliotheken, mit denen IE8 gut mit Canvas funktioniert. Ein Beispiel finden Sie hier .

Ich habe ihre gesamte Quelle gelesen, kann aber nicht verstehen, wie Canvas mit IE8 funktioniert. Kann jemand bitte etwas Licht auf die verwendete Methode werfen?

internet-explorer-8 html canvas Kshitij Saxena -KJ-
quelle

Antworten:

95

Die Seite verwendet Excanvas - eine JS-Bibliothek, die das Canvas-Element mit dem VML-Renderer des IE simuliert.

Beachten Sie, dass in Internet Explorer 9 das Canvas-Tag nativ unterstützt wird ! Weitere Informationen finden Sie in den MSDN-Dokumenten ...

Shog9
quelle
35
+1 für Googles Implementierung von Canvas für IE. Traurig zu sehen, dass Dritte Einschränkungen in Ihrem Browser beheben :)
Anderson Imes
8

Sie können fxCanvas ausprobieren: https://code.google.com/p/fxcanvas/

Es implementiert fast alle Canvas-APIs in Flash Shim.

Buzzilo
quelle
1
Dies erhält meine Stimme aufgrund der abscheulichen Leistung von Excanvas. Die Bibliothek hat einige Probleme, aber in meinen realen Tests hat sie Flashcanvas in Bezug auf Leistung und Stabilität übertroffen.
Aaronaught
Gibt es eine neue Version davon? Die Verbindung ist unterbrochen
Colbs
4

Sie können das neu veröffentlichte Chrome Frame-Plugin für IE verwenden, es erfordert jedoch, dass die HTML 5-Website das spezielle Meta-Tag enthält, mit dem das Plugin aktiviert wird.

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

Chrome Frame scheint Explore Canvas (excanvas.js) zu verwenden.

LondonBasedEngineer
quelle
2

Derzeit ist ExplorerCanvas die einzige Option, um HTML5-Canvas für IE6, 7 und 8 zu emulieren. Sie haben auch Recht mit der Leistung, die ziemlich schlecht ist.

Ich habe eine Partikelsimulation gefunden, die den Unterschied zwischen der echten HTML5-Canvas-Behandlung in Google Chrome, Safari und Firefox und ExplorerCanvas im IE misst. Die Ergebnisse zeigen, dass die wichtigsten Browser, die das Canvas-Tag unterstützen, etwa 20 bis 30 Mal schneller ausgeführt werden als das emulierte HTML5 in IE mit ExplorerCanvas.

Ich bezweifle, dass sich irgendjemand die Mühe machen wird, eine Alternative zu erstellen, weil 1) excanvas.js ungefähr so ​​sauber codiert ist wie es nur geht und 2) wenn IE9 veröffentlicht wird, alle gängigen Browser endlich das Canvas-Objekt unterstützen. Hoffentlich bekommen wir IE9 innerhalb eines Jahres

Eric @ www.webkrunk.com

Eric Rowell
quelle
Kann mir jemand sagen, was mit "langsam" gemeint ist? Meinen Sie damit, dass der Browser häufig nicht mehr reagiert, ähnlich wie beim Hängen, oder dauert das Laden der Seiten sehr lange, da jede Seite die excanvas.jsDatei laden muss, die ziemlich schwer ist (oder?)?
SexyBeast
excanvas.js ist nicht zu groß. Das Problem betrifft eher die mögliche maximale Framerate in Canvas-basierten Animationen.
Nichtigkeit
2

Wenn Sie IE8 verwenden müssen, können Sie diese JavaScript-Bibliothek für Vektorgrafiken ausprobieren. Es ist, als würde man gleichzeitig die Inkompatibilitäten "Canvas" und "SVG" von IE8 lösen.

Raphaël

Ich habe es gerade in einem schnellen Beispiel versucht und es funktioniert richtig. Ich weiß nicht, wie gut der Quellcode lesbar ist, aber ich hoffe, er hilft Ihnen. Wie auf der Website erwähnt, ist die Bibliothek mit sehr alten Entdeckern kompatibel.

Raphaël unterstützt derzeit Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ und Internet Explorer 6.0+.

Timbergus
quelle
0

Ich habe gerade Flashcanvas verwendet und das hat funktioniert. Wenn Sie auf Probleme stoßen, lesen Sie einfach die Vorbehalte und so weiter. Insbesondere wenn Sie Canvas-Elemente dynamisch erstellen, müssen Sie sie explizit initialisieren:

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