Heim > Artikel > Web-Frontend > So funktioniert die Canvas-Javascript-API in den wichtigsten Browsern

So funktioniert die Canvas-Javascript-API in den wichtigsten Browsern

王林nach vorne: 2023-09-16 08:53:021423Durchsuche

Canvas Javascript API 在主要浏览器中的作用

Die Canvas-JavaScript-API ist ein leistungsstarkes Tool zum Erstellen und Bearbeiten von Grafiken im Web. Es ermöglicht das Zeichnen von 2D-Grafiken mit JavaScript-Code und wird von den meisten modernen Webbrowsern unterstützt. Spielvorgänge, Animationen, Videoverarbeitung und mehr stammen alle aus der Canvas-API.

Die Canvas-API ist in Form eines Canvas-Elements implementiert, bei dem es sich um ein HTML-Element handelt, das in ein HTML-Dokument eingefügt werden kann. Das Canvas-Element dient als Zeichenfläche und kann per CSS gestylt und positioniert werden.

Um Grafiken auf der Leinwand zu zeichnen, können Sie die Zeichenmethoden der Canvas-API verwenden, z. B. arc, lineTo und fillRect. Mit diesen Methoden können Sie Formen, Linien und andere Grafiken auf der Leinwand zeichnen.

Browser-Unterstützung für Canvas API

Google Chrome und Mozilla Firefox sind die wichtigsten Browser, die die Canvas-API unterstützen. Verwenden Sie niemals Safari oder Microsoft Edge mit der Canvas-API. Die Canvas-API wird von allen gängigen Browsern außer Internet Explorer unterstützt.

Canvas funktioniert unter Windows, Linux, Mac, Android und iOS sowie allen gängigen Browsern. Das Betriebssystem sollte alle Sicherheitsprüfungen und Upgrades durchführen, um sicherzustellen, dass die Canvas-API ordnungsgemäß funktioniert. Hier ist eine Liste solcher Browser und ihrer Versionen.

Chrome
Firefox, aber die Erweiterungsversion wird nicht unterstützt
Rand
Der Respondus Lockdown-Browser unterstützt nur die neuesten Systemanforderungen.
Safari nur für Macintosh

Systeme mit mindestens 1GB RAM sind für die Nutzung der Canvas API geeignet. Native mobile Browser unterstützen Tablet-Geräte weniger. Der Standard-Android-Browser ändert sich je nach Mobilgerät.

Mobiler Browser

iOS

Safari ist der Standardbrowser und bietet begrenzte Unterstützung für Canvas.

Chrom

Photon Flash Player unterstützt Flash

Android

Chrome ist der Standardbrowser und bietet begrenzte Unterstützung für Canvas
Firefox

Screenreader

Macintosh VoiceOver in der neuesten Version von Safari
JAWS für PC in der neuesten Version von Firefox
PC NNVDA (neueste Version von Firefox)

Chrome unterstützt keine Screenreader in Canvas.

Erkennen Sie vom Canvas-API-Browser unterstützten Code

Canvas ist ein HTML 5-Element. Die getContext()-Methode in Canvas gibt den Zeichnungskontext zurück. Wenn null zurückgegeben wird, bedeutet dies, dass das Canvas-Element nicht unterstützt wird.

Benutzer können der folgenden Syntax folgen und den folgenden Code verwenden, um zu überprüfen, ob der Browser das Canvas-Element unterstützt.

Grammatik

if(document.createElement('canvas').getContext){
   /*Canvas object available*/
}

Die if-Bedingung in der Syntax erstellt ein Canvas-Element und versucht, den Kontext abzurufen. Wenn der Kontext zurückgegeben wird, unterstützt der Browser Canvas.

Beispiel

In diesem Programm können Benutzer die Browserunterstützung für Canvas überprüfen, indem sie auf eine Schaltfläche klicken. Wenn Sie auf die Schaltfläche klicken, ruft das Ereignis eine Funktion auf, die versucht, den Canvas-Kontext mithilfe der oben genannten Syntax abzurufen. Im Programm gibt es eine Flag-Variable, die die Browserunterstützung auszeichnet und dem Benutzer eine Meldung anzeigt.

<html>
<body>
   <h2> Check if your browser support canvas API in JavScript </i>
   </h2>
   <button class="button" onclick="browserSupport()">
      Check
   </button>
   <br> <br>
   <b class="outputEl"> </b>
   <script>
      function browserSupport() {
         if (document.createElement('canvas').getContext)
            hasSupport = true;
         else
            hasSupport = false;
         document.querySelector('.outputEl').innerHTML = hasSupport ? "Browser supports canvas" : "Browser does not support canvas";
      }
   </script>
</body>
</html>

Beispiel

Hier ist ein Beispiel dafür, wie man mit der Canvas-API einen einfachen Kreis auf Leinwand zeichnet -

<html>
<body>
   <p> Drawing a circle using Canvas JavaScript API </p>
   <canvas id="myCanvas" width="200" height="100"></canvas>
   <script>
      var canvas = document.getElementById("myCanvas");
      var context = canvas.getContext("2d");
      context.beginPath();
      context.arc(95, 50, 40, 0, 2 * Math.PI);
      context.stroke();
   </script>
</body>
<html>

In diesem Beispiel wird das Canvas-Element mit der ID „myCanvas“ und einer Breite und Höhe von 200 bzw. 100 Pixeln erstellt. Die Methode getContext wird verwendet, um den Zeichenkontext der Leinwand abzurufen, und die Methode arc wird verwendet, um einen Kreis mit einem Mittelpunkt von (95, 50) und einem Radius von 40 Pixeln zu zeichnen. Zeichnen Sie dann mit der Strichmethode den Kreis auf die Leinwand.

Dieses Tutorial hilft uns zu verstehen, ob die Canvas-API ein integrierter nativer Bestandteil aller gängigen Browser ist. Nicht alle großen Browser verfügen über eine integrierte Canvas-API. Wir kennen jetzt einen Code, um die Browserunterstützung für die Canvas-API zu erkennen. Benutzer können Fehler beim Codieren von Leinwänden mit früheren Browsern vermeiden, unterstützt durch dieses Code-Snippet zur Überprüfung.

Das obige ist der detaillierte Inhalt vonSo funktioniert die Canvas-Javascript-API in den wichtigsten Browsern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript firefox css chrome safari html edge NULL if 事件 canvas windows android ios microsoft linux

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Generieren Sie die erste n-Sequenz zum Sehen und Sprechen von Zahlen in JavaScriptNächster Artikel：Generieren Sie die erste n-Sequenz zum Sehen und Sprechen von Zahlen in JavaScript

In Verbindung stehende Artikel

Mehr sehen