Manuel de référence de Canvas HTML
Manuel de référence de Canvas HTML
L'étiquette HTML <canvas> est utilisée pour dessiner des graphiques dynamiquement via des scripts (généralement JavaScript).
Pour en savoir plus sur <canvas>, veuillez lire notre tutoriel HTML Canvas.
Couleur, style et ombre
| Propriété |
Description |
| fillStyle |
Définir ou retourner la couleur, la dégradation ou le motif de remplissage du dessin |
| strokeStyle |
Définir ou retourner la couleur, la dégradation ou le motif de l'épaisseur du trait |
| shadowColor |
Définir ou retourner la couleur de l'ombre |
| shadowBlur |
Définir ou retourner le niveau de flou de l'ombre |
| shadowOffsetX |
Définir ou retourner la distance horizontale de l'ombre par rapport à la forme |
| shadowOffsetY |
Définir ou retourner la distance verticale de l'ombre par rapport à la forme |
| Méthode |
Description |
| createLinearGradient() |
Créer une dégradé linéaire (utilisé sur le contenu du canevas) |
| createPattern() |
Répéter un élément spécifié dans une direction spécifiée |
| createRadialGradient() |
Créer une dégradé radial/circulaire (utilisé sur le contenu du canevas) |
| addColorStop() |
Définir les couleurs et les positions d'arrêt de la dégradation dans l'objet de dégradé |
Style de ligne
| Propriété |
Description |
| lineCap |
Définir ou retourner le style de pointe de la ligne |
| lineJoin |
Définir ou retourner le type de coin créé lors de l'intersection des lignes |
| lineWidth |
Définir ou retourner la largeur de la ligne actuelle |
| miterLimit |
Définir ou retourner la longueur maximale de l'angle de soudure |
Rectangle
| Méthode |
Description |
| rect() |
Créer un rectangle |
| fillRect() |
Dessiner un rectangle 'rempli' |
| strokeRect() |
Dessiner un rectangle (sans remplissage) |
| clearRect() |
Effacer les pixels spécifiés dans un rectangle donné |
Chemin
| Méthode |
Description |
| fill() |
Remplir le dessin courant (chemin) |
| stroke() |
Dessiner le chemin défini |
| beginPath() |
Commencer un nouveau chemin ou réinitialiser le chemin courant |
| moveTo() |
Déplacer le chemin au point spécifié dans le canevas sans créer de ligne |
| closePath() |
Créer un chemin qui revient au point de départ à partir du point courant |
| lineTo() |
Ajouter un nouveau point puis créer une ligne dans le canevas allant de ce point au point spécifié en dernier |
| clip() |
Couper une région de forme et de taille arbitraires à partir du canevas original |
| quadraticCurveTo() |
Crée une courbe quadratique |
| bezierCurveTo() |
Crée une courbe cubique |
| arc() |
Crée un arc/courbe (utilisé pour créer un cercle ou une partie de cercle) |
| arcTo() |
Crée un arc/courbe entre deux tangentes |
| isPointInPath() |
Retourne true si le point spécifié se trouve dans le chemin actuel, sinon retourne false |
Transformation
| Méthode |
Description |
| scale() |
Agrandit ou réduit le dessin actuel |
| rotate() |
Tourne le dessin actuel |
| translate() |
Remappe la position (0,0) actuelle du canevas |
| transform() |
Remplace la matrice de transformation actuelle du dessin |
| setTransform() |
Réinitialise la transformation actuelle à la matrice unitaire. Ensuite, exécutez transform() |
Texte
| Propriété |
Description |
| font |
Définit ou retourne les propriétés de police actuelles du contenu du texte |
| textAlign |
Définit ou retourne l'alignement actuel du contenu du texte |
| textBaseline |
Définit ou retourne la ligne de base actuelle utilisée pour le dessin du texte |
| Méthode |
Description |
| fillText() |
Tracez du texte 'rempli' sur le canevas |
| strokeText() |
Tracez du texte sur le canevas (sans remplissage) |
| measureText() |
Retourne un objet contenant la largeur du texte spécifié |
Dessin d'image
| Méthode |
Description |
| drawImage() |
Tracez une image, un canevas ou une vidéo sur le canevas |
Opérations sur les pixels
| Propriété |
Description |
| width |
Retourne la largeur de l'objet ImageData |
| height |
Retourne la hauteur de l'objet ImageData |
| data |
Retourne un objet qui contient les données d'image de l'objet ImageData spécifié |
| Méthode |
Description |
| createImageData() |
Crée un nouvel objet ImageData vide |
| getImageData() |
Retourne un objet ImageData, qui contient les données d'image du rectangle spécifié sur le canevas |
| putImageData() |
Place les données d'image (à partir de l'objet ImageData spécifié) sur le canevas |
Composition
| Propriété |
Description |
| globalAlpha |
Définit ou retourne la valeur alpha ou la transparence actuelle du dessin |
| globalCompositeOperation |
Définit ou retourne la manière dont une nouvelle image est dessinée sur une image existante |
Autres
| Méthode |
Description |
| save() |
Enregistre l'état de l'environnement actuel |
| restore() |
Retourne l'état et les propriétés du chemin enregistré précédemment |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
