Derniers tutoriels de développement web
 

HTML Canvas Référence


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

méthode La description
createLinearGradient() Crée un gradient linéaire (à utiliser sur le contenu de la toile)
createPattern() Répète un élément spécifié dans la direction indiquée
createRadialGradient() Crée un dégradé radial / circulaire (à utiliser sur le contenu de la toile)
addColorStop() Indique les couleurs et arrêter des positions dans un objet gradient

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()