Please enable JavaScript.
Coggle requires JavaScript to display documents.
Canvas (Priçncipe du dessin (fillStyle est une propriété du contexte,…
Canvas
Priçncipe du dessin
fillStyle
est une propriété du contexte, similaire à du CSS. Peut prendre comme valeur une couleur, une pattern (texture) ou un gradient (dégradé). Par défaut couleur = noir.
fillRect(x, y, width, height)
: dessine un rectangle plein. On indique le point en haut à gauche, la largeur et la hauteur. Utilise le fillStyle courant
strokeStyle
est comme fillStyle mais pour les formes « en fil de fer », non pleines. Ex : un
cercle dont on ne veut que le contours. Mêmes
valeurs possibles que pour fillStyle.
strokeRect(x, y, width, height)
: idem fillRect mais rectangle en fil de fer, non plein. Utilise le strokeStyle courant.
clearRect(x, y, width, height)
: efface le rectangle courant (couleur = noir transparent, en fait le remet dans l’état initial)
Pour le Dessin d'un
*ARC
on ajoute : context.arc(centreX, centreY, rayon,
angleDepart, angleArrivee,
sensInverseAiguillesMontre);
**
context.arc(centerX, centerY, radius, 0, Math.PI/4, true);
Pour le Dessin d'un
CERCLE
on ajoute:
*context.arc(centerX, centerY, radius, 0, 2
Math.PI, false);
Pour le Dessin de
COURBE QUADRIQUES
on ajoute: context.moveTo(startX, startY); **context.quadraticCurveTo(controlX, controlY,
endX, endY);
Pour le Dessin de
COURBE de BEZIER
on ajoute context.moveTo(startX, startY);
**context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2,endX, endY);
Principe du dessin de lignes
par chemin
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 fil
l)
On aurait pu choisir la couleur juste avant le
stroke
ou le
fill
Contrairement à de nombreuses approches, pour dessiner des formes dans un canvas on utilise la notion de chemin
(path
).
principe d'utlissation
Déclarer le canvas
, ne pas oublier l’attribut id et sa taille :
<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");
Récupérer le contexte graphique du canvas
pour dessiner
var a_context = a_canvas.getContext("2d");
Dessiner à l’aide du contexte graphique
b_context.fillRect(50, 25, 150, 100);
Gestion des ombres
couleur:
context.shadowColor
floutage de l'ombre:
context.shadowBlur
decalage en x:
context.shadowOffsetX
decalage en y:
context.shadowOffsetY
Attributs du dessin « fil de
fer »
Largeur du trait : context
.lineWidth
=10;
Couleur du trait :
context.strokeStyle
=couleur, gradient ou texture
Arrondis aux extrêmités :
context.lineCap=[value];
dessin
Image
chargement d’image asynchrone
var imageObj = new Image();
*imageObj.onload = function(){ // On entre ici lorsque l’image est chargée, on dessine en 0,0 ici
context.drawImage(imageObj, 0, 0);
};
imageObj.src = "darth-vader.jpg";
Texture
La création de la texture :
context.font = "40pt Calibri";
font = value
textAlign = value
textBaseline = value
Dégradés
Création d’un gradient
linéaire/
Gradient linéaire
var my_gradient =
context.createLinearGradient(0, 0, 300, 0); my_gradient.addColorStop(0, "black");
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);
Formes personnalisées
context.beginPath(); // début de la forme
personnalisée
... Ici des ordres de dessin
context.closePath();
// fin de la forme
// ensuite on dessine la forme.
Amdouni Mouna DSI201