Please enable JavaScript.
Coggle requires JavaScript to display documents.
canvas (Principe d’utilisation (Principes du dessin (fillRect(x, y, width,…
canvas
Principe d’utilisation
Faire "reset" d'un canvas
On peut remettre le canvas dans l’état initial aussi en resettant la largeur ou sa hauteur
var b_canvas = document.getElementById("b");
b_canvas.width = b_canvas.width;
Cela efface le canvas mais remet aussi son contexte dans l’état initial
Principes du dessin
fillRect(x, y, width, height
strokeStyle
fillStyle
strokeRect(x, y, width, height
clearRect(x, y, width, height)
Déclarer le canvas,:
<canvas id="a" width="300" height="225"</canvas>
Récupérer dans une variable cet élément, dans du code JavaScript var a_canvas = document.getElementById("a");
Dessiner à l’aide du contexte graphique
b_context.fillRect(50, 25, 150, 100);
Récupérer le contexte graphique
var a_context = a_canvas.getContext("2d");
Attributs du dessin « fil de fer »
Largeur du trait : context.lineWidth=10
Couleur du trait : context.strokeStyle=couleur
Arrondis aux extrêmités : context.lineCap=[value];
<canvas> permet de dessiner en bitmap
dessin de formes (droites, courbes, rectangles, texte)
Nombreux filtres (blur, etc),
formes arrondies, support de la transparence
Nombreuses fonctions de gestion d’images,
Gestion des ombres
context.shadowColor
context.shadowBlur
context.shadowOffsetX
context.shadowOffsetY
Nombreuses options pour drawImage
drawImage(img, x, y)
drawImage(img, x, y, tailleX, tailleY)
drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
Dessiner l’image d’une vidéo dans un canvas avec drawImage()
ctxDest.drawImage(video1, 0, 0, videoWidth, videoHeight)
Dessin de dégradés
Création d’un gradient linéaire
Gradient linéaire var my_gradient = context.createLinearGradient(0, 0, 300, 0)
interpoler
my_gradient.addColorStop(0, "black"); my_gradient.addColorStop(1, "white");
Utilisation d’un gradient
context.fillStyle = my_gradient; context.fillRect(0, 0, 300, 225);
Création d’un gradient radial
var grd= context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
Dessin de texte
Cas simple : context.font = "40pt Calibri"; context.fillText("Hello World!", x, y);
Alignement de texte
context.textAlign=[value];
Valeurs possibles : start, end, left, center, ou right
Intéressant pour aller plus loin
Le site
http://www.html5canvastutorials.com/
possède de très nombreux tutoriaux
processingJS.org
Principe du dessin de lignes par chemin
pour dessiner des formes dans un canvas on utilise la notion de chemin (path).
On met le crayon à un endroit donné (moveTo)
On choisit la couleur et ce que l’on veut dessiner (strokeStyle ou fillStyle )
On dit jusqu’où on veut dessiner (lineTo par exemple)
Dessiner un Arc
context.arc(centreX, centreY, rayon, angleDepart, angleArrivee, sensInverseAiguillesMontre);
Courbes quadriques
context.quadraticCurveTo(controlX, controlY, endX, endY);
Courbes de Bezier
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
Formes personnalisées
context.beginPath(); // début de la forme personnalisée ... Ici des ordres de dessin context.closePath(); // fin de la forme
Textures
création de la texture
context.createPattern(imageObj, "repeat");
Images
context.drawImage(imageObj, 0, 0);
Manipulation des pixels d’une image
obtenir l’ensemble des pixels qui le composent.
bufferImage= ctx.getImageData(0, 0, width, height);
Détection d’événements dans un canvas
Voir
http://www.w3schools.com/html5/html5_ref_eventattributes.asp