En
Ua
Es
De
HTML Référence du canevas
HTML Référence du canevas
La balise HTML <canvas> est utilisée pour dessiner des graphiques, à la volée, via des scripts (généralement JavaScript).
Pour en savoir plus sur <canvas>, veuillez lire notre tutoriel HTML Canvas.
Couleurs, styles et ombres
| Propriété |
Description |
| fillStyle |
Définit ou renvoie la couleur, le dégradé ou le motif utilisé pour remplir le dessin |
| strokeStyle |
Définit ou renvoie la couleur, le dégradé ou le motif utilisé pour les traits |
| shadowColor |
Définit ou renvoie la couleur à utiliser pour les ombres |
| shadowBlur |
Définit ou renvoie le niveau de flou pour les ombres |
| shadowOffsetX |
Définit ou renvoie la distance horizontale de l'ombre à la forme |
| shadowOffsetY |
Définit ou renvoie la distance verticale de l'ombre à la forme |
Styles de lignes
| Propriété |
Description |
| lineCap |
Définit ou renvoie le style des embouts d'une ligne |
| lineJoin |
Définit ou renvoie le type de coin créé lorsque deux lignes se rencontrent |
| lineWidth |
Définit ou renvoie la largeur de ligne actuelle |
| miterLimit |
Définit ou renvoie la longueur maximale de l'onglet |
Rectangulaires
| Méthode |
Description |
| rect() |
Créer un rectangle |
| fillRect() |
Dessine un rectangle "rempli" |
| strokeRect() |
Dessinez un rectangle (pas de remplissage) |
| clearRect() |
Efface les pixels spécifiés dans un rectangle donné |
Chemins
| Méthode |
Description |
| fill() |
Remplit le dessin actuel (chemin) |
| stroke() |
Dessine en fait le chemin que vous avez défini |
| beginPath() |
Commence un chemin ou réinitialise le chemin actuel |
| moveTo() |
Déplace le chemin vers le point spécifié dans le canevas, sans créer de ligne |
| closePath() |
Crée un chemin depuis le point actuel jusqu'au point de départ |
| lineTo() |
Ajoute un nouveau point et crée une ligne vers ce point à partir du dernier point spécifié dans le canevas |
| clip() |
Découpe une région de n'importe quelle forme et taille de la toile d'origine |
| quadraticCurveTo() |
Crée une courbe de Bézier quadratique |
| bezierCurveTo() |
Crée une courbe de Bézier cubique |
| arc() |
Crée un arc/courbe (utilisé pour créer des cercles ou des parties de cercles) |
| arcTo() |
Crée un arc/courbe entre deux tangentes |
| isPointInPath() |
Renvoie vrai si le point spécifié se trouve dans le chemin actuel, sinon faux |
Transformations
| Méthode |
Description |
| scale() |
Agrandit ou réduit le dessin actuel |
| rotate() |
Fait pivoter le dessin actuel |
| translate() |
Remappe la position (0,0) sur le canevas |
| transform() |
Remplacer la matrice de transformation actuelle pour le dessin |
| setTransform() |
Réinitialise la transformation actuelle dans la matrice d'identité. Puis court transform() |
Texte
| Propriété |
Description |
| font |
Définit ou renvoie les propriétés de police actuelles pour le contenu du texte |
| textAlign |
Définit ou renvoie l'alignement actuel du contenu du texte |
| textBaseline |
Définit ou renvoie la ligne de base du texte actuelle utilisée lors du dessin du texte |
| Méthode |
Description |
| fillText() |
Dessine du texte "rempli" sur la toile |
| strokeText() |
Dessine du texte sur la toile (pas de remplissage) |
| measureText() |
Renvoie un objet qui contient la largeur du texte spécifié |
Dessin d'images
| Méthode |
Description |
| drawImage() |
Dessinez une image, une toile ou une vidéo sur la toile |
Manipulation des pixels
| Propriété |
Description |
| width |
Renvoie la largeur d'un objet ImageData |
| height |
Renvoie la hauteur d'un objet ImageData |
| data |
Renvoie un objet qui contient les données d'image d'un objet ImageData spécifié |
| Méthode |
Description |
| createImageData() |
Crée un nouvel objet ImageData vide |
| getImageData() |
Renvoie un objet ImageData qui copie les données de pixels pour le rectangle spécifié sur un canevas |
| putImageData() |
Remettez les données d'image (à partir d'un objet ImageData spécifié) sur le canevas |
Composition
| Propriété |
Description |
| globalAlpha |
Définit ou renvoie la valeur alpha ou de transparence actuelle du dessin |
| globalCompositeOperation |
Définit ou renvoie la manière dont une nouvelle image est dessinée sur une image existante |
Autre
| Méthode |
Description |
| save() |
Enregistrer l'état du contexte actuel |
| restore() |
Renvoie l'état et les attributs du chemin précédemment enregistrés |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
