<!-- Slide number: 1 -->
Canvas
OUALI Mohamed
<!-- Slide number: 2 -->
Définition
L'élément canvas est un nouveau composant de HTML5 .
Il permet d'effectuer des rendus dynamiques d'images bitmap via des scripts.
Il s'agit d'un espace de pixels initialement transparents
<!-- Slide number: 3 -->
Fonctionnement
canvas se résume en une zone de dessin dont la hauteur et la largeur sont définies dans du code HTML.
Du code JavaScript permet d'accéder à l'aire via une série complète de fonctions de dessins permettant de générer dynamiquement des graphismes
<!-- Slide number: 4 -->
1. Création du canvas
On crée un nouvel élément
On lui spécifie des dimensions précisées par les attributs width et height (ou via CSS).
On doit lui spécifier un identifiant avec l’attribut id
<canvas id="mon_canvas" width="350" height="350">
Texte alternatif pour les navigateurs ne supportant pas Canvas.
</canvas>
<!-- Slide number: 5 -->
2. Accès au canvas (javascript)
On passe à JavaScript, qui va se servir de cet élément HTML pour accéder à la surface de dessin.
Pour ceci, deux fonctions sont appelées :
Publicité
getElementById() : chercher et cibler l'élément <canvas> identifié par son attribut id unique (ici mon_canvas),
getContext() de l'élément ainsi récupéré pour savoir dans quel contexte de dessin (2D ou 3D) le script va pouvoir agir, et de quelles fonctions il pourra disposer.
Le contexte sera l'élément central de gestion de Canvas.
<!-- Slide number: 6 -->
Quelques principes
Les système de coordonnées
Le point de référence (0,0) est situé en haut à gauche
L'axe horizontal (x) est défini par la première coordonnée
L'axe vertical (y) est défini par la seconde coordonnée
Ces valeurs correspondent à la grille entourant les pixels, et non pas aux pixels eux-mêmes
Le point de coordonnées (4,2) sera situé 4 pixels à droite du coin supérieur gauche, et 2 pixels en-dessous
<!-- Slide number: 7 -->
Quelques principes
Un tracé ou chemin est le fait de tracer des formes géométriques.
Un tracé peut se dérouler en plusieurs étapes:
initialisation,
point de départ
point d'arrivée,
clôture,
affichage du contour et/ou du remplissage.
<!-- Slide number: 8 -->
Quelques principes
Un tracé est d'abord initialisé par la méthode beginPath().
Le point de référence de début du tracé est désigné avec moveTo(x,y).
Il s'agit en quelque sorte de décider à partir de quel emplacement le pinceau va être posé.
Publicité
Puis vient le tracé de la ligne elle-même avec la méthode lineTo(x,y) qui va ajouter un segment au chemin qui fut débuté par beginPath().
On peut ajouter autant de segments que l'on veut,
Enfin on ferme la forme pour revenir automatiquement au point de départ avec closePath() .
<!-- Slide number: 9 -->
3. Dessin d’un tracé ou chemin
var ctx = c.getContext("2d");
ctx.beginPath(); // Début du chemin
ctx.moveTo(50,50); // Le tracé part du point 50,50
ctx.lineTo(200,200); // Un segment est ajouté vers 200,200
ctx.moveTo(200,50); // Puis on saute jusqu'à 200,50
ctx.lineTo(50,200); // Puis on trace jusqu'à 50,200
ctx.closePath(); // Fermeture du chemin (facultative)
<!-- Slide number: 10 -->
4. Faire apparaitre le tracé
Rien ne va s’afficher sur le canvas
La forme n'apparait qu'une fois appelée l'une des deux méthodes
fill() pour remplir et
stroke() pour le contour.
ctx.stroke();
<!-- Slide number: 11 -->
4. Faire apparaitre le tracé
<!-- Slide number: 12 -->
Styles de contour et de remplissage
Publicité
Pour moduler les styles des couleurs de contour et de remplissage dont dépendent fill() et stroke() ,
il faut agir sur des propriétés du contexte de dessin qui sont fillStyle et strokeStyle.
La propriété lineWidth affecte l'épaisseur du trait, qui est de 1 pixel par défaut.
….
ctx2.strokeStyle = "sienna"; // Style du contour
ctx2.lineWidth = 5; // Epaisseur du contour
ctx2.fillStyle = "lightblue"; // Définition de la couleur de remplissage
ctx2.fill(); // Remplissage du dernier chemin tracé
ctx2.stroke(); // Dessin du contour
<!-- Slide number: 13 -->
Styles de contour et de remplissage
La propriété lineCap pour le style de fin de ligne
round : pour faire un arrondi au dela du bout du tracé,
butt : tracé "coupé" carré,
square : style carré (dépasse du point d'arrivée)
Et lineJoin pour la jointure :
bevel : biseauté
round : arrondi
mitter : rallonge les tracés jusqu'à ce qu'il se rejoigne entièrement pour faire un angle
<!-- Slide number: 14 -->
Les formes
Carré et rectangle
Pour tracer un rectangle en donnant sa hauteur, sa largeur et son point de départ pour les coordonnées startx, starty, la fonction fillRect() est indiquée
fillRect(startx, starty, hauteur, largeur)
Effacer une portion de surface
Publicité
Ses paramètres sont identiques à fillRect() mais elle "gommera" tout le contenu du rectangle ainsi défini
clearRect(startx, starty, hauteur, largeur)
<!-- Slide number: 15 -->
Arcs, cercles et courbes
Arc de cercle – fonction arc()
Les angles sont définis en radians avec Math.PI (un tour complet de cercle = 2*Math.PI)
Le sens de rotation est contraire aux aiguilles d'une montre lorsqu'il vaut true.
arc( x, y, radius, startAngle, endAngle, sensAntiHoraire )
Courbes spécifiques
les courbes de Bézier permettent de définir deux points d'inflection (cp1x, cp1y) et (cp2x, cp2y) pour changer de direction durant le tracé du même segment de courbe jusqu'au point de destination (destx, desty)
bezierCurveTo( cp1x, cp1y, cp2x, cp2y, destx, desty )
ctx.bezierCurveTo(300,100,100,300,300,300);
<!-- Slide number: 16 -->
Les images
on initialise une nouvelle image
On lui affecte une source
(le navigateur va charger en arrière-plan les données)
var image = new Image();
image.src = 'Tunisia.png';
image.onload = function() {
ctx.drawImage(this,20,20);
}
Cette fonction est appelée lorsque l'image a été chargée sinon rien ne s’affiche
La méthode drawImage(img,x,y) copie l'image img chargée sur la surface de dessin, aux coordonnées (x,y)