|
39.3 Graphisme Canvas |
  copyleftSee You Why? |
En début de chapitre, je vous signalais que JS seul n'offre pas beaucoup de possibilités au point de vue graphisme. Cependant, depuis la dernière version reconnue d'HTML, à savoir le HTML5, on y a introduit une nouvelle balise <canvas> qui permet d'utiliser une bibliothèque d'éléments graphiques considérable (ces lignes sont écrites en janvier 2013).
Trop nouveau pour être pris en charge correctement ? On prétend (en janvier 2013) que IE9, Google Chrome, Firefox et Opera supportent <canvas> depuis les mises à jour de septembre 2012. N'essayez pas avec IE8 ou autres versions plus anciennes, elles ne gèreront pas Canvas. Vous souhaitez savoir si votre ordi, ou mieux votre navigateur, accepte la balise <canvas>, alors regardez ci-dessous :
Si vous y voyez Los Angeles le soir en fond d'écran et trois photos d'animaux rencontrés lors de mon dernier voyage aux USA, placées aléatoirement et que vous pouvez déplacer, agrandir et faire tourner, c'est que votre navigateur accepte la balise <canvas>. [Les photos sont personnelles, les scripts sont inspirés (voir source)]
Le lecteur aura deviné qu'il faut utiliser une balise <canvas> et il n'a pas tort. Cependant, tout objet canvas doit être identifié, il faut donc utiliser un attribut id indispensable pour les scripts qui lui seront associés.
De plus, deux arguments obligatoires (width et height) détermineront la taille de l'objet canvas créé sur votre page (ne les oubliez pas !). Libre à vous d'ajouter un style à cet espace avec l'attribut style. Le lecteur aura saisi que s'il est fait appel à l'attribut id, c'est que l'on peut créer divers objets canvas sur une même page html.
Pour ne pas décourager ceux qui utilisent un navigateur qui ne gère pas la balise <canvas>, on peut y placer un texte... et pour garder un minimum de compatibilité avec le HTML, on n'oubliera pas la balise fermante </canvas>.
<html>
<head>
<title>Canvas activation</title>
</head>
<body>
<h2>CUY Canvas activation</h2>
<canvas id="monCanvas" width="300" height="100" style="border:3px solid #000000;">
Votre navigateur ne supporte pas la balise <canvas> du HTML5.
</canvas></body>
</html>
Rien en JavaScript pour l'instant... mais Canvas ne vous permettra pas d'aller plus loin sans JS.
Dès que l'on veut commencer à dessiner avec Canvas, il faut travailler avec des scripts JS... cela signifie que l'on devra travailler entre les balises <script> et </script>.
Tout d'abord, on doit retrouver l'objet défini (ou les objets) dans la balise <canvas>, ici, grâce à son id "monCanvas" choisie, on pourra écrire :
var c=document.getElementById("monCanvas");
puis, il faudra préciser dans quel contexte on voudra travailler : la fonction getcontext n'admet que deux paramètres différents, 2d pour travailler en 2d, et WebGL pour la 3d. On écrira par exemple :
var ctx=c.getContext("2d");
Ce contexte étant précisé, il sera maintenant possible d'utiliser les propriétés et méthodes accessibles pour dessiner.
fillStyle("#cccc00") définit une couleur de remplissage d'un objet ;
fillRect(absc_coin_sup_gauch,ordo_coin_sup_gauch,largeur,hauteur) dessine un rectangle rempli avec le style actuel de remplissage ;
strokeStyle("#dd1133") définit une couleur de dessin de trait ;
rect(absc_coin_sup_gauch,ordo_coin_sup_gauch,largeur,hauteur) dessine un rectangle avec le style actuel de trait ;
moveTo(x,y) place le curseur au point de départ d'un trait ;
lineTo(x,y) définit le point d'arrivée de ce trait ;
stroke() donne l'ordre d'afficher ;
Ne sont que quelques exemples de méthodes applicables... reste à les placer dans une ou plusieurs fonctions. La séquence suivante fera état des propriétés et méthodes prédéfinies de Canvas. Attention cependant à l'ordre (logique) de vos instructions :
Essayons donc :
<script>
var c=document.getElementById("monCanvas");
var ctx=c.getContext("2d");
//rectangle rempli vert-gris
ctx.fillStyle="#cccc00";
ctx.fillRect(15,30,150,75);
//trait
ctx.moveTo(10,10);
ctx.lineTo(300,180);
//bleu comme couleur de trait
ctx.strokeStyle = "#0000FF";
// dessin du rectangle
ctx.rect(40, 30, 200, 125);
ctx.stroke();
</script>
... et surtout, essayez des variantes de ce court script.
Canvas ne distingue aucune de ces notions fondamentales en géométrie, cependant, il connait la méthode arc et laisse au programmeur le soin de manipuler correctement ses 6 paramètres. Le lecteur qui aura lu avec attention le titre précédent pourrait s'imaginer que Canvas aurait une méthode circle qu'on pourrait agrémenter d'un circleStroke et d'un circleFill, comme pour les rectangles. Il n'en est rien, Canvas ne connait que arc...
Évidemment, arc n'existe pas seul, il faudra utiliser arc avec ses paramètres : arc(xc,yc,ra,ad,af,ss) :
Radians ? C'est quoi ça ?
À l'école primaire vous avez appris que l'on mesurait les angles en degrés, notés ° ;
les radians sont une autre mesure des angles et déjà en primaire, on les a présentés sans vous en donner le nom. La longueur de la circonférence mesure 2 fois "pi" fois le rayon... et on vous a dit que "faire le tour du disque ou du cercle c'est parcourir une circonférence". D'où :
|
en tours
|
en radians
|
en degrés
|
| un tour complet | 2 π rad (ou 6,28... rad) | 360° |
| un demi tour | π rad (ou 3,14... rad) | 180° |
| un quart de tour un angle droit |
π/2 rad. (ou 1,57... rad) | 90° |
| un tour / 2 π | 1 rad | 180/π° (ou 57,3...°) |
| un tour / 360 | π/180 rad (ou 0,017453277... rad) | 1° |
On emploiera cette dernière ligne pour convertir des degrés en radians...
1° ==> Math.PI / 180 rad.
30° ==> 30 * Math.PI /180 rad.
43° ==> 43 * Math.PI / 180 rad.
Sens de rotation ? Avec une valeur logique ou booléenne ? Là, le JS et Canvas n'ont à nouveau pas respecté les conventions trigonométriques :
true signifie sens négatif trigonométrique (donc le sens horlogique, c'est-à-dire celui de la rotation des aiguilles),
false signifie sens positif trigonométrique (donc sens antihorlogique, c-à-d sens contraire de la rotation des aiguilles)...
ce qui est contraire à ce que donne la majorité des tutoriels relatifs au HTML5 et/ou Canvas, mais conforme à mon Google Chrome sous Win 7.0. Merci de me préciser s'il en est autrement chez vous (en m'indiquant votre navigateur et votre OS).
 |
Si votre cercle, arc, secteur ou disque est déterminé, il vous faudra encore quelques instructions pour mener votre dessin à bien.
ctx.beginPath() : qui commence un chemin ou en réinitialise un nouveau chemin : moveTo(), lineTo(), quadricCurveTo(), bezierCurveTo(), arcTo(), et l'arc(), sont autant de méthodes qui créent des chemins ;
ctx.stroke() : qui trace sur la toile Canvas le chemin (=path) prédéfini ;
En résumé, on pourrait écrire :
function dessineFormes(){
// initialisation d'un objet CANVAS en employant le DOM
var canvas = document.getElementById('exempledemoarc');
// une vérification pour voir si CANVAS est supporté
if (canvas.getContext){
// emploi de getContext pour utiliser CANVAS pour le dessin
var ctx = canvas.getContext('2d');
// dessins des formes
for (i=0;i<4;i++){ // i fixe les lignes
for(j=0;j<3;j++){ // j fixe les colonnes
ctx.beginPath();
var x = 25+j*50; // la coordonnée x
var y = 25+i*50; // la coordonnée y
var rayon = 20; // Arc rayon
var debutAngle = 0; // fiXe le point de départ sur le cercle
var finAngle = Math.PI+(Math.PI*j)/2;
// fixe le point d'arrivée sur le cercle
var ssRotation = i%2==0 ? false : true;
// sens horloger ou antihorloger
ctx.arc(x,y,rayon,debutAngle,finAngle,ssRotation);
if (i>1){
ctx.fill();
} else {
ctx.stroke();
}
}
}
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
Et oui, Canvas permet la création de dégradé.
— Vous voulez-dire un passage progressif d'une couleur à l'autre ?
— Oui, c'est bien cela.
Comme toujours, on commence par situer ce nouvel objet canvas hors JS, en employant les balises <canvas> sans oublier ses arguments obligatoires width et height, et un style facultatif large de 8 pixels et d'une couleur qui tire plus vers le bleu que vers le rouge :
<center>
<canvas id="monCanvas2" width="300" height="200" style="border:8px solid #114477;">
Votre navigateur ne supporte pas la balise <canvas> du HTML5.
</canvas>
</center>
Et comme la suite doit se faire en JS, on notera les balises ouvrante et fermante <script> et entre elles, on rappellera l'objet canvas avec lequel on veut travailler et on fixera le contexte choisi ('2d' pour commencer).
<script> var c=document.getElementById("monCanvas2");
var ctx=c.getContext("2d");
</script>
On lira dans la séquence suivante que createLinearGradient(0,0,290,0) est le code pour créer un dégradé linéaire (à utiliser sur le contenu canvas) de l'épaisseur d'un pixel, horizontal (car allant du point (0,0) au point (290,0)), mais pourquoi s'arrêter à 290 si l'on peut aller jusqu'au bord de notre objet c créé ?
On fixera alors la couleur de départ (rouge ou 'red' ou '#FF0000'), celle d'un point intermédiaire (cyan foncé ou 'darkcyan' ou '#008888') que nous fixerons à 80 % du cadre de c et celle d'arrivée (cyan ou 'cyan' ou '#00FFFF').
Il restera à spécifier que le dégradé que nous venons de définir sera le style de remplissage du rectangle que nous définirons (à 10 pixels des bords).
var mon_degrad1 = ctx.createLinearGradient(0,0,c.width,0);
mon_degrad1.addColorStop(0, '#FF0000');
mon_degrad1.addColorStop(0.8, '#008888');
mon_degrad1.addColorStop(1, '#00FFFF');
ctx.fillStyle = mon_degrad1;
ctx.fillRect(10,10,c.width-20,c.height-20);
Pas convaincu ? Essayez vous-même alors :
... essayez des variantes de ce court script... surtout si vous voulez comprendre pourquoi on écrit width-20 pour être à 10 du bord droit... ;o) c'est notre avant-dernière (ou pénultième, qui avait parié que je ne la placerais pas dans ce tutoriel de Javascript ?) séquence théorique, vous devriez pouvoir répondre.
Et maintenant, un dernier effort pour programmer ces vagues écrites sous canvas... et si l'effort est trop grand, pour essayer de comprendre le script qui génère ces vagues ;o) et ne me dites pas "Je dis vague".
Notre but n'était pas ici :
* ni de vous faire un tutoriel relatif au HTML5,
* ni de vous faire un tutoriel sur la balise <canvas> du HTML5,
mais bien de vous montrer que faire du graphisme avec la balise <canvas> du HTML5 ne peut se réaliser qu'avec un minimum de JavaScript et donc sans maîtriser un peu le sujet traité dans ce tutoriel "Premiers pas en JavaScript".
Si vous voulez en apprendre plus sur le sujet, googlez html5 et canvas, et choisissez ce qui vous convient le mieux.
voir suite >>>
voir suite >>>
