HTML5 Canvas: So testen Sie, ob der Browser Canvas_html5-Tutorial-Fähigkeiten unterstützt-H5-Tutorial-php.cn

Dieser Artikel ist eine Übersetzung aus Steve Fulton & Jeff Fulton HTML5 Canvas, Kapitel 1, „Testen, um zu sehen, ob der Browser Canvas unterstützt“.

Nachdem wir den Verweis auf das Canvas-Element auf der HTML-Seite erhalten haben, müssen wir testen, ob das Element „Kontext“ enthält. Der Kontext eines Canvas bezieht sich auf die vom Browser zum Zeichnen definierte Ebene. Einfach ausgedrückt: Wenn der Kontext nicht existiert, existiert Canvas nur im Namen. Es gibt verschiedene Möglichkeiten zu testen, ob ein Browser Canvas unterstützt. Die erste Methode besteht darin, zu prüfen, ob die getContext-Methode des Canvas-Elements in der HTML-Seite vorhanden ist:

Kopieren Sie den Code

Der Code lautet wie folgt:

if (!theCanvas || !theCanvas.getContext) {
return;
}

Tatsächlich das Obige Der Code testet zwei Punkte: Erstens wird getestet, ob theCanvas falsch ist (wenn die ID nicht vorhanden ist, gibt document.getElementById() false zurück). Zweitens wird getestet, ob die Funktion getContext() existiert.

Wenn im obigen Code der Test fehlschlägt, wird die Return-Anweisung ausgeführt und das Programm beendet.

Eine andere Methode besteht darin, eine Funktion zu erstellen, die speziell dazu dient, zu bestimmen, ob Canvas unterstützt wird, und in dieser Funktion wird in Echtzeit ein Canvas-Element generiert, um diese Entscheidung zu treffen – diese Methode ist sehr beliebt, Mark Pilgrim in seiner HTML5-Lösung wird auf der Website http://diveintohtml5.org erwähnt:

Kopieren Sie den Code

Der Code lautet wie folgt:

function canvasSupport() {
return !!document.createElement('canvas').getContext;
}
function canvasApp() {
if (!canvasSupport( )) {
return;
}
}

Unsere bevorzugte Methode ist die Verwendung der modernizr.js-Bibliothek (zu finden unter http://www.modernizr.com). Modernizr ist eine einfache und benutzerfreundliche, leichtgewichtige JavaScript-Bibliothek zum Testen der Kompatibilität verschiedener Webtechnologien. Sie bietet viele statische boolesche Methoden, mit denen getestet werden kann, ob das aktuelle Canvas unterstützt wird.

Modernizr in die HTML-Seite einzuführen ist sehr einfach: Laden Sie den Code von http://www.modernizr.com herunter und fügen Sie dann diese externe js-Datei in die HTML-Seite ein:

Kopieren Sie den Code

Der Code lautet wie folgt:

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse