La description Le HTML5 <canvas> tag est utilisé pour dessiner des graphiques, à la volée, par l' intermédiaire de scripts (habituellement JavaScript).
Cependant, le <canvas> élément a pas de capacités de dessin de sa propre (il est seulement un conteneur pour les graphiques) - vous devez utiliser un script pour dessiner effectivement les graphiques.
Le getContext() méthode renvoie 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 l' getContext("2d") objet, qui peut être utilisé pour dessiner le texte, des lignes, des boîtes, des cercles, et plus encore - sur la toile.
support du navigateur Les chiffres du tableau indiquent la première version du navigateur qui prend en charge totalement l'élément.
Élément <canvas> 4.0 9.0 2.0 3.1 9.0
Internet Explorer 9, Firefox, Opera, Chrome, Safari et le soutien <canvas> et ses propriétés et méthodes.
Remarque: Internet Explorer 8 et les versions antérieures, ne supportent pas le <canvas> élément.
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 les courses shadowColor Définit ou renvoie la couleur à utiliser pour les ombres shadowBlur Définit ou retourne le niveau de flou pour les ombres shadowOffsetX Définit ou renvoie la distance horizontale de l'ombre de la forme shadowOffsetY Définit ou renvoie la distance verticale de l'ombre de la forme
Styles de ligne Propriété La description lineCap Définit ou renvoie le style des embouts pour une ligne lineJoin Définit ou renvoie le type d'angle créé, lorsque deux lignes se rencontrent lineWidth Définit ou retourne la largeur de la ligne courante miterLimit Définit ou renvoie la longueur maximale d'onglet
Rectangles méthode La description rect() Crée un rectangle fillRect() Dessine un rectangle "rempli" strokeRect() Dessine un rectangle (pas de remplissage) clearRect() Efface les pixels spécifiés à l'intérieur d'un rectangle donné
Chemins méthode La description fill() Remplit le dessin courant (chemin) stroke() attire fait le chemin que vous avez défini beginPath() Commence un chemin, ou remet à zéro le chemin courant moveTo() Déplace le chemin vers le point spécifié dans la toile, sans créer une ligne closePath() Crée un chemin à partir du point courant vers le point de départ lineTo() Ajoute un nouveau point et crée une ligne à ce point à partir du 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 (utilisé pour créer des cercles, ou des parties de cercles) arcTo() Crée un arc / courbe entre deux tangentes isPointInPath() Renvoie true si le point spécifié est dans le chemin actuel, sinon false
Transformations méthode La description scale() Scales le dessin courant plus ou moins important rotate() Fait pivoter le dessin courant translate() Remappe (0,0) position sur la toile transform() Remplace la matrice de transformation pour le tirage setTransform() Remet le courant de transformation à la matrice d'identité. Exécute ensuite transform ()
Texte Propriété La description font Définit ou renvoie les propriétés de police actuelles pour le contenu du texte textAlign Définit ou retourne l'alignement en cours pour le contenu du texte textBaseline Définit ou retourne le courant de base de texte utilisé lors de l'élaboration du texte
méthode La description fillText() Dessine le texte "rempli" sur la toile strokeText() Dessine le texte sur la toile (pas de remplissage) measureText() Retourne un objet qui contient la largeur du texte spécifié
Image Dessin méthode La description drawImage() Dessine une image, toile, ou la vidéo sur la toile
Pixel Manipulation Propriété La description width Renvoie la largeur d'un objet ImageData height Retourne la hauteur d'un objet ImageData data Retourne un objet qui contient des données d'image d'un objet ImageData spécifié
méthode La 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 une toile putImageData() Met les données d'image (à partir d'un objet ImageData spécifié) retour sur la toile
Compositing Propriété La description globalAlpha Définit ou renvoie l'alpha ou la transparence valeur actuelle du dessin globalCompositeOperation Définit ou retourne la façon dont une nouvelle image sont dessinées sur une image existante
Autre méthode La description save() Enregistre l'état du contexte actuel restore() Renvoie l'état et les attributs de chemin précédemment enregistré createEvent() getContext() toDataURL()