Please enable JavaScript.
Coggle requires JavaScript to display documents.
CANVAS (Des méthode permet de dessiner des trajets (lineTo(x,y) Dessine…
CANVAS
-
-
Canvas Permet de
-
-
remplir des dessins avec des couleurs, des styles ou des ombres
-
-
-
-
La première chose à faire est d'insérer le canvas avec la balise <canvas>
Dès que c'est fait, on accède au canvas avec getElementByID
var contexte=canvas.getContext("2d");
Les images :
Il est possible d'insérer des images au sein d'un canvas. Pour ce faire, on utilisera la méthode drawImage(image, x, y)
Exp : var zozor = new Image();
zozor.src = 'zozor.png'; // Image de 80x80 pixels
context.drawImage(zozor, 35, 35);
Les dégradés
Canvas propose deux types de dégradés : linéaire et radial. Pour créer un dégradé, on commence par créer un objet canvasGradient que l'on va assigner à fillStyle. Pour créer un tel objet, on utilise au choix createLinearGradient() ou createRadialGradient()
Les rotations
Les rotations permettent d'appliquer une rotation aux axes du canvas. Le canvas tourne autour de son point d'origine (0,0). La méthode rotate() reçoit un seul paramètre : l'angle de rotation spécifié en radians. Il est possible de combiner une rotation et une translation,
Les animations
La gestion des animations avec Canvas est quasi inexistante ! En effet, Canvas ne propose rien pour animer les formes, les déplacer, les modifier… Pour arriver à créer une animation avec Canvas, il faut :
Dessiner une image
Effacer tout
Redessiner une image, légèrement modifiée
Effacer tout
Et ainsi de suite…