HTML5 <canvas>Manuel de référence
Description
La balise HTML5 <canvas> est utilisée pour dessiner des images (via des scripts, généralement JavaScript).
Toutefois, l'élément <canvas> lui-même n'a aucune capacité de dessin (il n'est qu'un conteneur pour les graphiques) - vous devez utiliser des scripts pour effectuer la tâche de dessin proprement dite.
La méthode getContext() renvoie un objet qui fournit des méthodes et des propriétés pour dessiner sur le canvas.
Ce manuel fournit les propriétés et méthodes complètes de l'objet getContext("2d"), qui peut être utilisé pour dessiner du texte, des lignes, des rectangles, des cercles, et plus encore sur le canvas.
Prise en charge des navigateurs
Internet Explorer 9, Firefox, Opera, Chrome et Safari prennent en charge les attributs et méthodes de la balise <canvas>.
Remarque :Internet Explorer 8 et les versions IE antérieures ne prennent pas en charge l'élément <canvas>.
Couleurs, styles et ombres
| Propriétés |
Description |
| fillStyle |
Définit ou renvoie la couleur, le dégradé ou le motif utilisé pour remplir les dessins. |
| strokeStyle |
Définit ou renvoie la couleur, le dégradé ou le motif utilisé pour les traits. |
| shadowColor |
Définit ou renvoie la couleur utilisée pour les ombres. |
| shadowBlur |
Définit ou renvoie le niveau de flou utilisé pour les ombres. |
| shadowOffsetX |
Définit ou renvoie la distance horizontale entre l'ombre et la forme. |
| shadowOffsetY |
Définit ou renvoie la distance verticale entre l'ombre et la forme. |
Styles de ligne
| Propriétés |
Description |
| lineCap |
Définit ou renvoie le style des extrémités d'une ligne. |
| lineJoin |
Définit ou renvoie le type de coin créé lorsque deux lignes se croisent. |
| lineWidth |
Définit ou renvoie la largeur actuelle de la ligne. |
| miterLimit |
Définit ou renvoie la longueur maximale de l'onglet. |
Rectangles
| Méthodes |
Description |
| rect() |
Crée un rectangle. |
| fillRect() |
Dessine un rectangle "rempli". |
| strokeRect() |
Dessine un rectangle (sans remplissage). |
| clearRect() |
Efface les pixels spécifiés dans un rectangle donné. |
Chemins
| Méthodes |
Description |
| fill() |
Remplit le dessin actuel (chemin). |
| stroke() |
Dessine le chemin défini. |
| beginPath() |
Commence un chemin, ou réinitialise le chemin actuel. |
| moveTo() |
Déplace le chemin vers le point spécifié dans le canvas, sans créer de ligne. |
| closePath() |
Crée un chemin à partir du point actuel jusqu'au point de départ. |
| lineTo() |
Ajoute un nouveau point, puis crée une ligne dans le canvas depuis ce point jusqu'au dernier point spécifié. |
| clip() |
Découpe une région de n'importe quelle forme et taille à partir du canevas 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/une courbe (utilisé pour créer des cercles ou des cercles partiels). |
| arcTo() |
Crée un arc/une courbe entre deux tangentes. |
| isPointInPath() |
Renvoie true si le point spécifié se trouve dans le chemin actuel, sinon renvoie false. |
Transformations
| Méthodes |
Description |
| scale() |
Met à l'échelle le dessin actuel pour l'agrandir ou le réduire. |
| rotate() |
Fait pivoter le dessin actuel. |
| translate() |
Remappe la position (0,0) sur le canevas. |
| transform() |
Remplace la matrice de transformation actuelle du dessin. |
| setTransform() |
Réinitialise la transformation actuelle sur la matrice identité. Exécute ensuite transform(). |
Texte
| Propriétés |
Description |
| font |
Définit ou renvoie la propriété de police actuelle du contenu textuel. |
| textAlign |
Définit ou renvoie l'alignement actuel du contenu textuel. |
| textBaseline |
Définit ou renvoie la ligne de base actuelle du texte utilisée lors du dessin du texte. |
| Méthodes |
Description |
| fillText() |
Dessine du texte "rempli" sur le canvas. |
| strokeText() |
Dessine du texte sur le canvas (sans remplissage). |
| measureText() |
Renvoie un objet contenant la largeur du texte spécifié. |
Dessin d'images
| Méthodes |
Description |
| drawImage() |
Dessine une image, un canevas ou une vidéo sur le canevas. |
Opérations sur les pixels
| Propriétés |
Description |
| width |
Renvoie la largeur de l'objet ImageData. |
| height |
Renvoie la hauteur de l'objet ImageData. |
| data |
Renvoie un objet qui contient les données d'image de l'objet ImageData spécifié. |
| Méthodes |
Description |
| createImageData() |
Crée un nouvel objet ImageData vide. |
| getImageData() |
Renvoie un objet ImageData qui copie les données de pixel depuis le rectangle spécifié sur le canvas. |
| putImageData() |
Remet les données d'image (provenant de l'objet ImageData spécifié) sur le canvas. |
Composition
| Propriétés |
Description |
| globalAlpha |
Définit ou renvoie la valeur alpha ou de transparence actuelle du dessin. |
| globalCompositeOperation |
Définit ou renvoie la manière dont les nouvelles images sont dessinées sur les images existantes. |
Autre
| Méthodes |
Description |
| save() |
Sauvegarde l'état du contexte actuel. |
| restore() |
Renvoie l’état et les propriétés du chemin précédemment enregistrés. |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
Autres extensions