HTML5 Canvas
L'élément <canvas> définit un conteneur pour des graphiques, tels que des diagrammes et des images. Vous devez utiliser des scripts (généralement JavaScript) pour dessiner des graphiques.
Dessinez un rectangle rouge, un rectangle dégradé, un rectangle coloré et du texte coloré sur le canvas.
Qu'est-ce que le canvas ?
L'élément HTML5 <canvas> est utilisé pour le dessin de graphiques, qui est réalisé au moyen de scripts (généralement JavaScript).
L'élément <canvas> n'est qu'un conteneur pour les graphiques, et vous devez utiliser des scripts pour dessiner des graphiques.
Vous pouvez utiliser canvas pour dessiner des tracés, des rectangles, des cercles, des caractères et ajouter des images de différentes manières.
Prise en charge des navigateurs
Le numéro de version du premier navigateur à prendre en charge l'élément <canvas> est représenté dans le tableau.
| Élément | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Création d'un Canvas (Canvas)
Dans une page web, un canvas est une zone rectangulaire définie par l'élément <canvas>.
Remarque :Par défaut, l'élément <canvas> n'a ni bordure ni contenu.
Exemple simple de l'élément <canvas> :
Remarque :L'élément <canvas> doit généralement spécifier un attribut id (souvent référencé dans le script), et les attributs width et height définissent la taille du canvas.
Astuce :Vous pouvez utiliser plusieurs éléments <canvas> dans une page HTML.
Utilisez l'attribut style pour ajouter une bordure :
Exemple
Essayez-le »
Utilisation de JavaScript pour dessiner des images
L'élément <canvas> lui-même ne dispose pas de capacités de dessin. Tout le travail de dessin doit être effectué en interne en JavaScript :
Exemple
Exemple
Explication de l'exemple :
Tout d'abord, trouvez l'élément <canvas> :
Ensuite, créez un objet de contexte :
L'objet getContext("2d") est un objet HTML5 intégré qui possède plusieurs méthodes pour dessiner des chemins, des rectangles, des cercles, des caractères et ajouter des images.
Les deux lignes de code suivantes dessinent un rectangle rouge :
ctx.fillRect(0,0,150,75);
La propriété fillStyle peut être des couleurs CSS, des dégradés ou des motifs. La valeur par défaut de fillStyle est #000000 (noir).
La méthode fillRect(x,y,width,height) définit le mode de remplissage actuel pour le rectangle actuel.
Coordonnées du canvas
Le canvas est une grille bidimensionnelle.
La coordonnée en haut à gauche du canvas est (0,0).
La méthode fillRect avec les paramètres (0,0,150,75) signifie : dessiner un rectangle de 150x75 sur le canvas, à partir du coin supérieur gauche (0,0).
L'exemple de coordonnées :
Comme le montre la figure ci-dessous, les coordonnées X et Y du canvas servent à positionner le dessin sur le canvas. Le cadre rectangulaire tracé à la souris affiche les coordonnées de positionnement.
Canvas - Chemins
Canvas - Chemins
) Définir la coordonnée de départ de la ligne
- moveTo(x,y) Définir la coordonnée de fin de la ligne
- lineTo(x,yPour dessiner des lignes, nous devons utiliser la méthode « encre », comme stroke().
Exemple
Exemple
Votre navigateur ne prend pas en charge l'élément HTML5 <canvas>.
JavaScript :
Pour dessiner un cercle dans le canvas, nous utiliserons les méthodes suivantes :
En fait, lorsqu'on dessine un cercle, on utilise la méthode « encre », comme stroke() ou fill().
arc(x,y,r,start,stop)
Exemple
Exemple
Votre navigateur ne prend pas en charge l'élément HTML5 <canvas>.
JavaScript :
Canvas - Texte
Canvas - Texte
font - Définir la police
- ) - Dessiner du texte plein sur le canvas
- fillText(text,x,y) - Dessiner du texte creux sur le canvas
- strokeText(text,x,yUtilisez fillText() :
Exemple
Exemple
Votre navigateur ne prend pas en charge l'élément HTML5 <canvas>.
JavaScript :
Utilisez strokeText() :
Exemple
Exemple
Votre navigateur ne prend pas en charge l'élément HTML5 <canvas>.
JavaScript :
Canvas - Dégradés
Canvas - Dégradés
Il existe deux façons différentes de configurer le dégradé Canvas :
) - Créer un dégradé linéaire
- createLinearGradient(x,y,x1,y1) - Créer un dégradé radial/circulaire
- createRadialGradient(x,y,r,x1,y1,r1Lorsque vous utilisez un objet de dégradé, vous devez utiliser au moins deux couleurs d'arrêt.
La méthode addColorStop() spécifie l'arrêt de couleur, et les paramètres utilisent des coordonnées pour le décrire, qui peuvent être comprises entre 0 et 1.
Utilisez un dégradé, définissez la valeur de fillStyle ou strokeStyle sur le dégradé, puis dessinez des formes telles que des rectangles, des textes ou des lignes.
Utilisez createLinearGradient() :
Exemple
Exemple
Votre navigateur ne prend pas en charge l'élément HTML5 <canvas>.
JavaScript :
Utilisez createRadialGradient() :
Exemple
Exemple
Votre navigateur ne prend pas en charge l'élément HTML5 <canvas>.
JavaScript :
Canvas - Images
Canvas - Images
Utilisation des images :
- drawImage(image,x,y)
Utilisation des images :
Manuel de référence pour HTML Canvas
Votre navigateur ne prend pas en charge l'élément HTML5 <canvas>.
JavaScript :
Manuel de référence HTML Canvas
Balise HTML <canvas>
Manuel de référence pour HTML CanvasBalise HTML <canvas>
Canvas vers image
| Balise | L'élément HTML5 <canvas> utilise JavaScript pour dessiner des images sur une page web. |
|---|---|
| <canvas> | Pour plus d'informations, consultez : |
Réflexion de l'IA en cours...Apprendre HTML5 Canvas, cet article suffit.Autres extensions