Ombrage de formes

Les trois formes géométriques sont ombrées !

Le script

	var canevas = document.querySelectorAll('canvas')[0]; 
	var contexte = canevas.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);
	

Commentaire

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 dernière forme est définie avec la syntaxe SVG (notation en relatif).
Retour menu