Please enable JavaScript.
Coggle requires JavaScript to display documents.
Canvas (2-Les fonctions (stroke() (Applique un style de trait (surlignage)…
Canvas
1-Introduction
Définition
Une zone de dessin canvas peut être très simplement insérée dans le flux de la page
HTML
par une balise éponyme . À l’aide de
JavaScript
, quelques appels de fonction suffisent pour dessiner .
Principe
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)
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
Les Navigateur qui lui support
IE 9.0+
,
FIREFOX 2.0+
,
SAFARI 3.1+
,
CHROME 4.0+
,
OPERA 9.0+
,
IPHONE 1.0+
,
ANDROID 1.0+*
3-Exemple dessin forme avec Canvas
dessiner linear gardient
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
dessiner un texte
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";ctx.fillText("Hello World", 10, 50);
dessiner une cercle
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
dessiner cercle gradient
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
dessiner une ligne
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
mettre une image dans canvas
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
2-Les fonctions
stroke()
Applique un style de trait (surlignage) au chemin
fillStyle
Style de remplissage à l’intérieur des formes
fill()
Applique un remplissage au chemin pour créer une forme pleine
strokeStyle
Style pour les lignes autour des formes
rect(x,y,w,h)
Ajoute un rectangle au chemin
x,y : point de départ (coin supérieur gauche)
lineWith
Largeur de ligne
lineTo(x,y)
Ajoute le point au sous-chemin, connecté par une ligne
x,y : point d’arrivée
beginPath()
Débute un nouveau chemin
moveTo(x,y)
Débute un nouveau sous-chemin avec
le point donné
x,y : point de départ
lineCap
Forme de fin de ligne ( butt, round, ou square )
closePath()
Ferme le chemin
globalAlpha
Transparence générale ( 0 à 1 )
addColorStop(position, couleur)
Ajoute un point d’arrêt
position : position du point d’arrêt par
rapport à l’ensemble du dégradé (0 à 1)
couleur : code couleur
createLinearGradient(x1,y1,x2,y2)
Crée un dégradé linéaire
x1,y1 : coordonnées du point de départ
x2,y2 : coordonnées du point d’arrivée
createRadialGradient(x1,y1,r1,x2,y2,r2)
Crée un dégradé radial
x1,y1,r1 : coordonnées du point de départ et rayon
x2,y2,r2 : coordonnées du point d’arrivée et rayon
drawImage(img,x,y)
Trace une image avec ses
propres dimensions
img : image
x,y : coordonnées du coin supérieur gauche
drawImage(img,x,y,largeur,hauteur)
Trace une image redimensionnée
img : image
x,y : coordonnées du coin supérieur gauche
largeur, hauteur : dimensions de l’image de destination
fillText(txt,x,y,
maxw)
Texte plein
txt : chaîne de texte
x,y : coordonnées sur le canvas
maxw : largeur maximale (optionnel)
strokeText(txt,x,y,maxw)
Contour de texte
txt : chaîne de texte
x,y : coordonnées sur le canvas
maxw : largeur maximale (optionnel)
measureText(txt)
Renvoie l’espace nécessaire pour un texte (en pixels)
txt : chaîne de texte
Chemin
Styles de traits, remplissages et couleurs
Dégradés
Image
Texte
