Comment fonctionne l'API Javascript Canvas dans les principaux navigateurs-js tutoriel-php.cn

Comment fonctionne l'API Javascript Canvas dans les principaux navigateurs

王林

Libérer： 2023-09-16 08:53:02

avant

1430 Les gens l'ont consulté

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

L'API JavaScript Canvas est un outil puissant pour créer et manipuler des graphiques sur le Web. Il vous permet de dessiner des graphiques 2D à l'aide du code JavaScript et est pris en charge par la plupart des navigateurs Web modernes. Les opérations de jeu, les animations, le traitement vidéo et bien plus encore proviennent tous de l'API Canvas.

L'API canevas est implémentée sous la forme d'un élément canevas, qui est un élément HTML pouvant être placé dans un document HTML. L'élément canevas sert de surface de dessin et peut être stylisé et positionné à l'aide de CSS.

Pour dessiner des graphiques sur le canevas, vous pouvez utiliser les méthodes de dessin de l'API canevas, telles que arc, lineTo et fillRect. Ces méthodes vous permettent de dessiner des formes, des lignes et d'autres graphiques sur la toile.

Prise en charge du navigateur pour l'API Canvas

Google Chrome et Mozilla Firefox sont les principaux navigateurs prenant en charge l'API Canvas. N'utilisez jamais Safari ou Microsoft Edge avec l'API Canvas. L'API Canvas est prise en charge par tous les principaux navigateurs à l'exception d'Internet Explorer.

Canvas fonctionne sur Windows, Linux, Mac, Android et iOS et tous les principaux navigateurs. Le système d'exploitation doit effectuer toutes les vérifications de sécurité et mises à niveau pour garantir le bon fonctionnement de l'API Canvas. Voici une liste de ces navigateurs et de leurs versions.

Chrome
Firefox, mais la version d'extension n'est pas prise en charge
Bord
Le navigateur Respondus Lockdown ne prend en charge que la dernière configuration système requise.
Safari uniquement pour Macintosh

Les systèmes dotés d'au moins 1 Go de RAM conviennent à l'utilisation de l'API Canvas. Les navigateurs mobiles natifs prennent moins en charge les tablettes. Le navigateur Android par défaut change en fonction de l'appareil mobile.

Navigateur mobile

iOS

Safari est le navigateur par défaut et sa prise en charge est limitée pour Canvas.

Chrome

Photon Flash Player prend en charge Flash

Android

Chrome est le navigateur par défaut et sa prise en charge est limitée pour Canvas
Firefox

Lecteur d'écran

Macintosh VoiceOver dans la dernière version de Safari
JAWS pour PC dans la dernière version de Firefox
PC NNVDA (dernière version de Firefox)

Chrome ne prend pas en charge les lecteurs d'écran dans Canvas.

Détecter le code pris en charge par le navigateur API Canvas

Canvas est un élément HTML 5. La méthode getContext() dans Canvas renvoie le contexte du dessin. Si null est renvoyé, cela signifie que l'élément canvas n'est pas pris en charge.

Les utilisateurs peuvent suivre la syntaxe ci-dessous et utiliser le code ci-dessous pour vérifier si le navigateur prend en charge l'élément canvas.

Grammaire

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

Copier après la connexion

La condition if dans la syntaxe crée un élément canevas et essaie d'obtenir le contexte. Si le contexte est renvoyé, le navigateur prend en charge le canevas.

Exemple

Dans ce programme, les utilisateurs peuvent vérifier la prise en charge du navigateur pour Canvas en cliquant sur un bouton. Lorsque vous cliquez sur le bouton, l'événement appelle une fonction qui tente d'obtenir le contexte du canevas en utilisant la syntaxe ci-dessus. Il existe une variable d'indicateur dans le programme qui distingue la prise en charge du navigateur et affiche un message à l'utilisateur.

<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>

Copier après la connexion

Exemple

Voici un exemple de la façon de dessiner un cercle simple sur un canevas à l'aide de l'API canevas -

<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>

Copier après la connexion

Dans cet exemple, l'élément canvas est créé avec l'identifiant "myCanvas" et une largeur et une hauteur de 200 et 100 pixels respectivement. La méthode getContext est utilisée pour obtenir le contexte de dessin du canevas et la méthode arc est utilisée pour dessiner un cercle avec un point central de (95, 50) et un rayon de 40 pixels. Utilisez ensuite la méthode du trait pour dessiner le cercle sur la toile.

Ce tutoriel nous aide à comprendre si l'API Canvas est une partie native intégrée de tous les principaux navigateurs. Tous les principaux navigateurs ne disposent pas d'une API de canevas intégrée. Nous connaissons maintenant un morceau de code permettant de détecter la prise en charge par le navigateur de l'API Canvas. Les utilisateurs peuvent éviter les erreurs lors du codage des canevas à l'aide des navigateurs précédents, pris en charge par cet extrait de code à des fins de vérification.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!