Contenu

I. Graphisme et JavaScript

voir <<< séquence précédente

II. Librairies extérieures

voir <<< séquence précédente

III. HTML5, Canvas et graphisme

voir <<< séquence précédente

IV. Canvas, propriétés et méthodes

Le but de cette séquence n'est pas de créer un tutoriel exhaustif de toutes les possibilités graphiques des propriétés et méthodes utilisables avec Canvas. Nous avons voulu récolter une collection de possibilités avec une courte description pour permettre au lecteur de découvrir les nombreuses possibilités (de départ) offertes par l'instruction Canvas et le graphisme qu'elle peut engendrer.

Merci de considérer cette liste comme un aide-mémoire.

Couleurs, Styles et Ombres

Propriété	Description
fillStyle	Définit ou retourne la couleur, le dégradé ou le motif utilisé pour remplir le dessin (ex. : `ctx.fillStyle="#FF0000";`)
strokeStyle	Définit ou retourne la couleur, dégradé ou motif utilisé pour les chemins (strokes ou paths) (ex. : `vv`)
shadowColor	Définit ou retourne la couleur à utiliser pour les ombres (ex. : `vv`)
shadowBlur	Définit ou retourne le niveau de flouà utiliser pour les ombres (ex. : `vv`)
shadowOffsetX	Définit ou retourne la distance horizontale entre l'ombre et la forme (ex. : `vv`)
shadowOffsetY	Définit ou retourne la distance verticale entre l'ombre et la forme (ex. : `vv`)

Méthode	Description
createLinearGradient()	Crée un dégradé linéaire (à utiliser sur le contenu canvas) (ex. : `var mon_gradient1 = ctx.createLinearGradient(0,0,170,0);`)
createPattern()	Répète un élément spécifié dans la direction indiquée (ex. : `// création d'un nouvel objet image à utiliser comme motif var img = new Image(); img.src = 'images/interrog.png'; var pat = ctx.createPattern(img,"repeat"); ctx.rect(0,0,150,100); ctx.fillStyle = pat; ctx.fill();`)
createRadialGradient()	Crée un dégradé radial / circulaire (à utiliser sur le contenu canvas) Cette méthode retourne un objet qui représente CanvasGradient un dégradé radial qui peint le long du cône donné par les cercles représentés par les arguments. Les trois premiers arguments définissent un cercle avec un centre de coordonnées (x1, y1) et de rayon r1 et le deuxième cercle avec un centre de coordonnées (x2, y2) et rayon r2 (ex. : `ctx2.rect(0, 0, canvas.width, canvas.height); // create radial gradient var grd = ctx2.createRadialGradient(238, 50, 10, 238, 50, 300); // bleu clair grd.addColorStop(0, '#8ED6FF'); // bleu foncé grd.addColorStop(1, '#004CB3'); ctx2.fillStyle = grd; ctx2.fill();`)
addColorStop()	Spécifie les couleurs et les positions d'arrêt dans un objet gradient Prend deux arguments : (1) la position qui doit être un nombre entre 0.0 et 1.0 et définit la position relative de la couleur dans le dégradé. En la positionnant en 0.45 par exemple, on place la couleur presque au milieu du dégradé et (2) l'argument color qui doit être une chaîne représentant une couleur CSS (par exemple #F0F0F0, rgba(0,0,0,1), etc.) (ex. : `mon_gradient1.addColorStop(0,"#000000"); //noir au début mon_gradient1.addColorStop(0.4,"#ff0000"); //rouge avant la moitié mon_gradient1.addColorStop(1,"#ffffff"); //blanc à la fin ctx.fillStyle = mon_gradient1;`)

Styles de lignes et embouts

Propriété	Description
lineCap	Définit ou retourne le style des embouts pour une ligne (ex. : `ctx.lineCap="round";`)
lineJoin	Définit ou retourne le type d'angle créé lorsque deux lignes se rencontrent (ex. : `ctx.lineJoin="bevel\|round\|miter";`)
lineWidth	Définit ou renvoie la largeur de la ligne actuelle (ex. : `ctx.lineWidth=10; ctx.strokeRect(20,20,80,100);`)
miterLimit	Définit ou retourne la longueur maximale d'un onglet (ex. : `ctx.lineJoin="miter"; ctx.miterLimit=5;`)

Rectangles

Méthode	Description
rect()	Crée un rectangle (ex. : `ctx.rect(40, 30, 200, 125);`)
fillRect()	Dessine un rectangle "plein" ou "rempli" (ex. : `ctx.fillRect(15,30,150,75);`)
strokeRect()	Dessine un rectangle (non rempli) (ex. : `ctx.strokeRect(20,20,150,100);`)
clearRect()	Efface les pixels spécifiés dans un rectangle donné (ex. : `ctx.fillStyle="#00dd00"; ctx.fillRect(0,0,350,180); ctx.clearRect(20,20,120,70);`)

Chemins (Path)

Méthode	Description
fill()	Remplit le dessin courant (chemin, path) (ex. : `ctx.rect(20,20,150,100); ctx.fillStyle="red"; ctx.fill();`)
stroke()	Dessine le chemin (path) préalablement défini (ex. : `ctx.beginPath(); ctx.moveTo(50,30); ctx.lineTo(150,150); ctx.lineTo(150,300); ctx.strokeStyle="#aa9933"; ctx.stroke();`)
beginPath()	Commence un chemin, ou réinitialise le chemin courant (ex. : `ctx.beginPath(); ctx.moveTo(50,30); ctx.lineTo(150,150); ctx.lineTo(150,300); ctx.strokeStyle="#aa9933"; ctx.stroke();`)
moveTo()	Déplace le chemin d'accès au point spécifié dans la toile, sans créer une ligne (lever le crayon) (ex. : `ctx.beginPath(); ctx.moveTo(50,30); ctx.lineTo(150,150); ctx.lineTo(150,300); ctx.strokeStyle="red"; ctx.stroke();`)
closePath()	Crée un chemin (path) du point courant au point de départ du chemin, retourne au point de départ du chemin pour fermer le parcours [ici, retourne en (30,30) et ferme le triangle] (ex. : `ctx.beginPath(); ctx.moveTo(30,30); ctx.lineTo(30,150); //1er côté ctx.lineTo(105,150); //2e côté ctx.closePath(); ctx.stroke();`)
lineTo()	Ajoute un nouveau point et crée une ligne entre ce point et le dernier point spécifié dans la toile (ex. : `ctx.beginPath(); ctx.moveTo(30,30); ctx.lineTo(30,150); //1er côté ctx.lineTo(105,150); //2e côté ctx.closePath(); ctx.stroke();`)
clip()	Clipse une region de n'importe quelle forme et taille du canvas d'origine (ex. : `vv`)
quadraticCurveTo()	Crée une courbe de Bézier quadratique (ex. : `vv`)
bezierCurveTo()	Crée une courbe de Bézier cubique (ex. : `vv`)
arc()	Crée un arc, un secteur, un disque ou un cercle (ex. : `vv`)
arcTo()	Crée un arc / courbe entre deux tangentes (ex. : `vv`)
isPointInPath()	Retourne true si le point spécifié se trouve dans le chemin courant, sinon false (ex. : `vv`)

Transformations

Méthode	Description
scale()	Modifie l'échelle du dessin courant (en plus grand ou plus petit) (ex. : `ctx.strokeRect(5,5,25,15); ctx.scale(2,2.5); ctx.strokeRect(5,5,25,15); ctx.scale(2,1.5); ctx.strokeRect(5,5,25,15); ctx.scale(2,3.1); ctx.strokeRect(5,5,25,15);`)
rotate()	Fait pivoter le dessin courant dans le sens horloger (négatif trigonométrique, voir remarque séquence précédente) La rotation ne s'applique que sur les dessins demandés après l'instruction rotate() (ex. : `ctx.rotate(20*Math.PI/180); ctx.fillRect(50,20,100,50);`)
translate()	Remappe ou repositionne la position (0,0) sur la toile Effectue un glissement ou translation (de 80 vers la droite et 100 vers le bas) (ex. : `ctx.fillRect(20,10,100,50); ctx.translate(80,100); ctx.fillRect(20,10,100,50);`)
transform()	Remplace la matrice de transformation courante pour le dessin (ex. : `vv`)
setTransform()	Remet à zéro le courant de transformer la matrice d'identité. Exécute ensuite transform () (ex. : `vv`)

Texte

Propriété	Description
font	Définit ou retourne les propriétés de police actuelles pour le contenu du texte (ex. : `vcontext.font="italic small-caps bold 18px arial";`)
textAlign	Définit ou retourne l'alignement actuel pour le contenu du texte p/r à un point fixé (x,y) (ex. : `ctx.textAlign="right"; ctx.fillText("alignement du texte = droite",150,140);`)
textBaseline	Définit ou retourne la ligne de base du texte actuel pour dessiner du texte p/r à un point déterminé comme départ du texte attributs possibles : "alphabetic\|top\|hanging\|middle\|ideographic\|bottom" théoriquement conforme au schéma suivant, mais... : (ex. : `ctx.textBaseline="middle"; ctx.fillText("Ligne de base : middle",20,80);`)

Méthode	Description
fillText()	Dessine le texte en "rempli" ou "plein" sur canvas (ex. : `ctx.font="40px Georgia"; // Crée un dégradé var degrad2=ctx.createLinearGradient(0,0,300,0); degrad2.addColorStop("0","#ffdd00"); degrad2.addColorStop("0.65","#0000ff"); degrad2.addColorStop("1.0","#ff0000"); // pour remplir avec le dégradé défini ctx.fillStyle = degrad2; ctx.fillText("Souriez !",20,70);`)
strokeText()	Dessine le texte sur canvas (non rempli) (ex. : `ctx.font="40px Georgia"; // Crée un dégradé var degrad2=ctx.createLinearGradient(0,0,300,0); degrad2.addColorStop("0","#ffdd00"); degrad2.addColorStop("1.0","#ff0000"); // pour remplir avec le dégradé défini ctx.fillStyle = degrad2; ctx.strokeText("Souriez !",20,70);`)
measureText()	Retourne un objet qui contient la largeur du texte spécifié (ex. : `ctx.font="24px Georgia"; var txt="CUY vous salue" ctx.fillText("width:" + ctx.measureText(txt).width,10,50) ctx.fillText(txt,20,150);`)

Affichage d'image ou vidéo

Méthode	Description
drawImage()	Dessine une image, un dessin ou une vidéo sur le canvas

Manipulation d'images et pixels

Propriété	Description
width	Retourne la largeur d'un objet ImageData (ex. : `vv`)
height	Retourne la hauteur d'un objet ImageData (ex. : `vv`)
data	Retourne un objet qui contient des données d'image d'un objet spécifié ImageData (ex. : `vv`)

Méthode	Description
createImageData()	Crée un nouvel objet vide ImageData (ex. : `vv`)
getImageData()	Retourne un objet ImageData qui copie les données de pixels pour le rectangle spécifié sur une toile (ex. : `vv`)
putImageData()	Met les données d'image (à partir d'un objet spécifié ImageData) de retour sur la toile (ex. : `vv`)

Composition graphique

Propriété	Description
globalAlpha	Définit ou retourne l'alpha actuelle ou de la valeur de la transparence du dessin (ex. : `vv`)
globalCompositeOperation	Définit ou retourne la façon dont une nouvelle image est dessinée sur une image existante (ex. : `vv`)

Autres...

Méthode	Description
save()	Enregistre l'état du contexte actuel (ex. : `vv`)
restore()	Retourne précédemment état du chemin enregistré et attributs (ex. : `vv`)
createEvent()
getContext()
toDataURL()

VIII. Exercices relatifs au graphisme

voir suite >>>

IX. Test relatif au graphisme

voir suite >>>

Graphisme CANVAS en JS (39.3)

| | Exercices relatifs au graphisme avec JS (39.8)