Please enable JavaScript.
Coggle requires JavaScript to display documents.
Canvas (Dessiner (Courbes quadriques (context.moveTo(startX, startY);,…
Canvas
Dessiner
Arc (de cercle)
context.arc(centreX, centreY, rayon,angleDepart, angleArrivee,sensInverseAiguillesMontre);
Cercle
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
Courbes quadriques
context.moveTo(startX, startY);
context.quadraticCurveTo(controlX, controlY,endX, endY);
Courbes de Bezier
context.moveTo(startX, startY);
context.bezierCurveTo(controlX1, controlY1,controlX2, controlY2,endX, endY);
Dégradés
gradient linéaire*
var my_gradient = context.createLinearGradient(0, 0, 300, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
un gradient radial
var grd= context.createRadialGradient(startX, startY, startRadius,endX, endY, endRadius);
On ajoute des « stop colors »
grd.addColorStop(0, "red");
grd.addColorStop(0.17, "orange");
grd.addColorStop(0.666, "blue");
grd.addColorStop(1, "violet");
Principe du dessin
fillRect(x, y, width, height)
pour les
formes non pleines Ex : un
cercle
strokeStyle
rectangle en fil de fer, non plein
clearRect(x, y, width, height)
dessine un
rectangle plein
strokeRect(x, y, width, height)
efface le
rectangle courant
Attributs du dessin
Largeur du trait
: context.lineWidth=10;
Couleur du trait
: context.strokeStyle=couleur,
Arrondis aux extrêmités
: context.lineCap=[value];
Exemple
:context.lineCap = "round";
Images
context.drawImage(imageObj, 0, 0);
drawImage
drawImage(img, x, y) :
dessine l’image à la position x,y, l’image conserve sa taille
drawImage(img, x, y, tailleX, tailleY) :
l’image est retaillée au moment où elle est dessinée
drawImage(img, sx, sy, sw, sh,
dx, dy, dw, dh);
permet de ne
dessiner qu’une partie de l’image source dans le canvas, tout en
spécifiant la taille.
Manipulation des pixels d’une
image
bufferImage= ctx.getImageData(0, 0, width, height);
Dessiner l’image d’une vidéo
dans un canvas avec drawImage()
ctxDest.drawImage(video1, 0, 0, videoWidth, videoHeight);
var a = bufferImage[i + 3];
var b = bPixels[i + 2];
var g = bufferImage[i + 1];
var r = bufferImage[i + 0];
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
Principe du dessin de lignes
par chemin
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)
Encore un coup (lineTo, on trace deux lignes jointives…)
On dessine (stroke ou fill)
On aurait pu choisir la couleur juste avant le stroke ou le fill
Gestion des ombres
Quatre attributs pour cela :
context.shadowOffsetY
context.shadowOffsetX
context.shadowBlur
context.shadowColor
Textures
La création de la texture :
context.createPattern(imageObj, "repeat");
Valeurs possibles pour le dernier paramètre : repeat
(par défaut), repeat-x, repeat-y, ou no-repeat
element is used to draw graphics, on the fly, via JavaScript.
element is only a container for graphics. You must use JavaScript to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.