Objet Canvas
L'objet Canvas est nouveau en HTML5.
Le HTML5 <canvas> balise est utilisée pour dessiner des graphiques, à la volée, avec JavaScript.
Accéder à une toile objet
Vous pouvez accéder à une <canvas> élément en utilisant getElementById() :
Créer une toile objet
Vous pouvez créer un <canvas> élément en utilisant le document. createElement() document. createElement() méthode:
Note: La <canvas> élément n'a pas de capacités de dessin de son propre (il est seulement un conteneur pour les graphiques) - vous devez utiliser un script pour dessiner réellement les graphiques.
Le getContext() méthode retourne un objet qui fournit des méthodes et des propriétés pour dessiner sur la toile.
Cette référence couvrira les propriétés et méthodes de la getContext("2d") objet, qui peut être utilisé pour dessiner le texte, des lignes, des boîtes, des cercles et plus - sur la toile.
Couleurs, styles et ombres
| Propriété | La description |
|---|
| fillStyle | Définit ou renvoie la couleur, dégradé ou motif utilisé pour remplir le dessin |
| strokeStyle | Définit ou renvoie la couleur, dégradé ou motif utilisé pour des courses |
| shadowColor | Définit ou retourne la couleur à utiliser pour les ombres |
| shadowBlur | Définit ou retourne le niveau de flou pour les ombres |
| shadowOffsetX | Définit ou retourne la distance horizontale de l'ombre de la forme |
| shadowOffsetY | Définit ou retourne la distance verticale de l'ombre de la forme |
| méthode | La description |
|---|
|
createLinearGradient() | Crée un gradient linéaire (to use on canvas content) le (to use on canvas content) la (to use on canvas content) |
| createPattern() | Répète un élément spécifié dans la direction spécifiée |
| createRadialGradient() | Crée un gradient radial / circulaire (to use on canvas content) le (to use on canvas content) la (to use on canvas content) |
| addColorStop() | Spécifie les couleurs et positions d'arrêt dans un objet gradient |
Styles de ligne
| Propriété | La description |
|---|
| lineCap | Définit ou retourne le style des embouts pour une ligne |
| lineJoin | Définit ou retourne le type d'angle créé, lorsque deux lignes se rencontrent |
| lineWidth | Définit ou retourne la largeur de la ligne de courant |
| miterLimit | Définit ou retourne la longueur d'onglet maximale |
rectangles
| méthode | La description |
|---|
| rect() | Crée un rectangle |
| fillRect() | Dessine un "filled" rectangle |
| strokeRect() | Dessine un rectangle (no fill) de (no fill) |
| clearRect() | Efface les pixels spécifiés dans un rectangle donné |
chemins
| méthode | La description |
|---|
| fill() | Remplit le dessin courant (path) |
| stroke() | En fait, le chemin tire que vous avez défini |
| beginPath() | Début d'un chemin, ou remet à zéro le trajet de courant |
| moveTo() | Déplace le chemin vers le point spécifié dans la toile, sans créer une ligne |
| closePath() | Crée un chemin entre le point courant vers le point de départ |
| lineTo() | Ajoute un nouveau point et crée une ligne de ce point au dernier point spécifié dans la toile |
| clip() | Clips une région de toute forme et la taille de la toile originale |
| quadraticCurveTo() | Crée une courbe de Bézier quadratique |
| bezierCurveTo() | Crée une courbe de Bézier cubique |
| arc() | Crée un arc / courbe (used to create circles, or parts of circles) des (used to create circles, or parts of circles) des (used to create circles, or parts of circles) |
| arcTo() | Crée un arc / courbe entre deux tangentes |
| isPointInPath() | Renvoie true si le point spécifié est dans le chemin courant, sinon faux |
transformations
| méthode | La description |
|---|
| scale() | Met à l'échelle le dessin courant plus ou moins important |
| rotate() | Le dessin courant tourne |
| translate() | Remappe le (0,0) position sur la toile |
| transform() | Remplace la matrice de transformation de courant pour le dessin |
| setTransform() | Remet la transformation actuelle de la matrice d'identité. Exécute ensuite transform() |
Texte
| Propriété | La description |
|---|
| font | Définit ou retourne les propriétés de police en cours pour le contenu du texte |
| textAlign | Définit ou retourne l'alignement actuel du contenu du texte |
| textBaseline | Définit ou retourne la ligne de base de texte actuel utilisé pour afficher du texte |
| méthode | La description |
|---|
| fillText() | Dessine "filled" texte sur la toile |
| strokeText() | Dessine un texte sur la toile (no fill) de (no fill) |
| measureText() | Renvoie un objet qui contient la largeur du texte spécifié |
image Dessin
| méthode | La description |
|---|
| drawImage() | Dessine une image, toile ou d'une vidéo sur la toile |
Manipulation des pixels
| Propriété | La description |
|---|
| width | Renvoie la largeur d'un objet ImageData |
| height | Renvoie la hauteur d'un objet ImageData |
| data | Retourne un objet qui contient des données d'image d'un objet spécifié ImageData |
| méthode | La description |
|---|
| createImageData() | Crée un nouvel objet ImageData blanc |
| getImageData() | Renvoie un objet ImageData qui copie les données de pixels pour le rectangle spécifié sur une toile |
| putImageData() | Met les données d'image (from a specified ImageData object) à (from a specified ImageData object) d' (from a specified ImageData object) en arrière sur la toile |
compositing
| Propriété | La description |
|---|
| globalAlpha | Définit ou retourne la valeur alpha ou la transparence actuelle du dessin |
| globalCompositeOperation | Définit ou retourne comment une nouvelle image sont étirées sur une image existante |
Autre
| méthode | La description |
|---|
| save() | Enregistre l'état du contexte actuel |
| restore() | Retourne l'état de chemin précédemment enregistré et attributs |
| createEvent() | |
| getContext() | |
| toDataURL() | |
Propriétés standard et événements
L'objet toile prend également en charge les standards propriétés et événements .
Pages associées
Tutoriel HTML: HTML5 Canvas
Référence HTML: HTML <canvas> balise