interface Web
js tutoriel
Comment fonctionne l'API Javascript Canvas dans les principaux navigateurs
Comment fonctionne l'API Javascript Canvas dans les principaux navigateurs
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*/
}
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>
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>
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Remplacer les caractères de chaîne en javascript
Mar 11, 2025 am 12:07 AM
Explication détaillée de la méthode de remplacement de la chaîne JavaScript et de la FAQ Cet article explorera deux façons de remplacer les caractères de chaîne dans JavaScript: le code JavaScript interne et le HTML interne pour les pages Web. Remplacer la chaîne dans le code JavaScript Le moyen le plus direct consiste à utiliser la méthode Remplace (): str = str.replace ("trouver", "remplacer"); Cette méthode remplace uniquement la première correspondance. Pour remplacer toutes les correspondances, utilisez une expression régulière et ajoutez le drapeau global G: str = str.replace (/ fi
Tutoriel de configuration de l'API de recherche Google personnalisé
Mar 04, 2025 am 01:06 AM
Ce tutoriel vous montre comment intégrer une API de recherche Google personnalisée dans votre blog ou site Web, offrant une expérience de recherche plus raffinée que les fonctions de recherche de thème WordPress standard. C'est étonnamment facile! Vous pourrez restreindre les recherches à Y
Exemple Couleurs Fichier JSON
Mar 03, 2025 am 12:35 AM
Cette série d'articles a été réécrite à la mi-2017 avec des informations à jour et de nouveaux exemples. Dans cet exemple JSON, nous examinerons comment nous pouvons stocker des valeurs simples dans un fichier à l'aide du format JSON. En utilisant la notation de paire de valeurs clés, nous pouvons stocker n'importe quel type
Créez vos propres applications Web Ajax
Mar 09, 2025 am 12:11 AM
Vous voici donc, prêt à tout savoir sur cette chose appelée Ajax. Mais qu'est-ce que c'est exactement? Le terme Ajax fait référence à un regroupement lâche de technologies utilisées pour créer un contenu Web interactif dynamique. Le terme Ajax, inventé à l'origine par Jesse J
8 Superbes plugins de mise en page JQuery Page
Mar 06, 2025 am 12:48 AM
Tirez parti de jQuery pour les dispositions de page Web sans effort: 8 plugins essentiels JQuery simplifie considérablement la mise en page de la page Web. Cet article met en évidence huit puissants plugins jQuery qui rationalisent le processus, particulièrement utile pour la création de sites Web manuels
Qu'est-ce que & # x27; ceci & # x27; en javascript?
Mar 04, 2025 am 01:15 AM
Points de base Ceci dans JavaScript fait généralement référence à un objet qui "possède" la méthode, mais cela dépend de la façon dont la fonction est appelée. Lorsqu'il n'y a pas d'objet actuel, cela fait référence à l'objet global. Dans un navigateur Web, il est représenté par Window. Lorsque vous appelez une fonction, cela maintient l'objet global; mais lors de l'appel d'un constructeur d'objets ou de l'une de ses méthodes, cela fait référence à une instance de l'objet. Vous pouvez modifier le contexte de ceci en utilisant des méthodes telles que Call (), Appliquer () et Bind (). Ces méthodes appellent la fonction en utilisant la valeur et les paramètres donnés. JavaScript est un excellent langage de programmation. Il y a quelques années, cette phrase était
Améliorez vos connaissances jQuery avec le spectateur source
Mar 05, 2025 am 12:54 AM
JQuery est un excellent cadre JavaScript. Cependant, comme pour n'importe quelle bibliothèque, il est parfois nécessaire de passer sous le capot pour découvrir ce qui se passe. C'est peut-être parce que vous tracez un bug ou que vous êtes simplement curieux de savoir comment jQuery réalise une interface utilisateur particulière
10 feuilles de triche mobiles pour le développement mobile
Mar 05, 2025 am 12:43 AM
Ce message compile des feuilles de triche utiles, des guides de référence, des recettes rapides et des extraits de code pour le développement d'Android, BlackBerry et Iphone. Aucun développeur ne devrait être sans eux! Guide de référence sur les gestes touchés (PDF) Une ressource précieuse pour Desig
