Vous pouvez me contacter via Facebook (questions, critiques constructives) : page facebook relative à mon site
Le canevas fait 300 par 300. Les variables X et Y représentent respectivement la largeur et la hauteur de la zone Canvas.
Le script :
var canevas = document.querySelector('canvas');
// canevas référence le premier élément "canvas"
var contexte = canevas.getContext('2d');
var X = canevas.width ; var Y = canevas.height;
contexte.textAlign ='center';
contexte.textBaseline = 'middle';
contexte.font = " bold italic 80px arial" ;
contexte.fillStyle = 'gold';
contexte.strokeStyle ='gold';
contexte.lineWidth = 5;
contexte.shadowColor = 'grey'; // couleur ombrage
contexte.shadowOffsetX = 10 ;
contexte.shadowOffsetY = 10 ;
contexte.shadowBlur = 10 ;
contexte.fillText('Hello', X/2, Y/3) ;
contexte.strokeText('world',X/2, Y/3*2);
...
Ici on utilise plusieurs propriétés de la bibliothèque Canvas.
Chaque mot se répartit horizontalement et verticalement autour de son point de référence car ici textAlign= 'center' et textBaseline= 'middle'
Mise en forme du texte grâce à la propriété font qui fonctionne exactement comme la méga propriété font de CSS.
Les quatres propriétés shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur permettent non seulement d'ombrer le texte du Canevas mais aussi les formes. Voir exemple 2 dans cette même page.
Les valeurs possibles de la propriété textAlign sont : left / center /right
Les valeurs possible de la propriété textBaseline sont : top / middle / bottom
La méga propriété font remplace les propriétés élémentaires suivantes : font-style, font-variant, font-weight, font-size,
font-family.
Exemple : font : italic small-caps bold 24pt Arial ;
Remarque : il faut respecter l'ordre mais il n'est pas obligatoire qu'il y ait 5 valeurs !
Les trois formes géométriques sont ombrées !
Le canevas fait 400 par 200.
Le script :
var canevas2 = document.querySelectorAll('canvas')[1];
// canevas2 référence le deuxième élément "canvas" de la page
var contexte = canevas2.getContext('2d');
contexte.shadowColor = 'grey';
contexte.shadowOffsetX = 10 ;
contexte.shadowOffsetY = 10 ;
contexte.shadowBlur = 10 ;
// créer un premier objet graphique : un rectangle
var rectangle1 = new Path2D();
rectangle1.rect(110,110,50,50);
// créer un deuxième objet graphique : un cercle
var cercle1 = new Path2D();
cercle1.arc(100,35, 25, 0, 2 * Math.PI);
// créer une troisième forme
var triangle1 = new Path2D('M200 10 h150 v100 z');
// dessiner ces objets
contexte.fill(rectangle1);
contexte.fill(cercle1);
contexte.fill(triangle1);
Les quatres propriétés shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur permettent non seulement d'ombrer le texte du Canevas mais aussi les formes.
Remarquez que les trois formes géométriques sont définies grâce au constructeur Path2D() et que la dernier chemin est défini avec la syntaxe SVG (notation en relatif). Dans ce tuto il y a un chapitre sur la production de chemins sous Canvas.