Contexte support des méthodes de dessin sur un objet canvas
Compatible tous navigateurs
Oui
Oui
Oui
Oui
Oui
Oui
Oui
Description CanvasRenderingContext2D est l'objet principal associé à l'objet HTMLCanvasElement et issu de l'appel à getContext().
L'affichage dans le canvas se fait par déplacement du curseur en position (x, y). Voici le schéma des axes, avec le point (0, 0) en haut à gauche :
Les angles sont gérés en radian. Voici un schéma d'organisation de quelques angles utiles :
Propriétés fillStyle Contient le style de remplissage, avec une couleur unie ou un gradient de couleurs font Contient la taille et le nom de la police pour l'écriture dans un canvas globalAlpha Contient le niveau d'opacité alpha du contexte de canvas lineWidth Contient l'épaisseur en pixels de tracé de ligne dans le canvas strokeStyle Contient le style de trait, avec une couleur unie ou un gradient de couleurs textBaseline Contient le mode d'affichage de la ligne de base des textes dans le canvas
Méthodes arc() Dessine un arc de cercle centré sur (x,y), de rayon r entre 2 angles beginPath() Initialise un tracé de ligne dans le contexte du canvas bezierCurveTo() Trace une courbe de Bézier dans le canvas closePath() Ferme le chemin dans le canvas avec une ligne entre le point actuel et le premier point createLinearGradient() Crée un gradient linéaire de couleurs suivant le vecteur (x1, y1, x2, y2) createPattern() Crée un motif de répétition d'une image createRadialGradient() Crée un gradient circulaire de couleurs entre les 2 cercles passés en paramètres drawImage() Affiche une image dans le canvas à l'emplacement (x, y) fill() Remplit la forme définie par le chemin actuel dans le contexte du canvas fillRect() Affiche un rectangle rempli dans le canvas fillText() Affiche le texte à la position (x, y) dans le canvas lineTo() Trace une ligne depuis le curseur actuel jusqu'au point (x, y) measureText() Mesure la largeur occupée par le texte passé en paramètre moveTo() Déplace le crayon au point x, y du canvas rect() Dessine les contours d'un rectangle dans le canvas rotate() Ajoute une rotation aux paramètres de transformation du canvas setTransform() Définit la matrice de transformation du canvas stroke() Affiche dans le canvas le chemin défini depuis l'appel à beginPath strokeText() Affiche les contours du texte à la position (x, y) dans le canvas
En savoir plus
