Dans mon précédent article Amusons-nous avec les canvas, nous étions arrivés au résultat ci-dessous:

Nous avons donc ici un effet que l’on aurait pu obtenir en CSS. Mais grâce aux <canvas> nous pouvons à présent remplir notre texte avec autre chose qu’une unique couleur ; avec les <canvas> on peut utiliser des dégradés, ainsi que des images.

Les dégradés

Avec les <canvas> nous disposons de deux types de dégradés pour remplir notre texte:

• les dégradés linéaires
• les dégradés radiaux.

Les dégradés linéaires

La déclaration d’un dégradé linéaire se fait de la manière suivante:

var grd = ctx.createLinearGradient(100,0,400,0);

Dans l’exemple ci-dessus, nous avons créé un dégradé linéaire entre les points 100,0 et 400,0 du <canvas>. Il est donc possible le créer un dégradé suivant une « diagonale » de notre <canvas>.

Créer un dégradé, c’est bien, mais maintenant il faut lui attribuer des couleurs. Pour cela on procède de la manière suivante:

grd.addColorStop(0,"red");
grd.addColorStop(0.5,"orange");
grd.addColorStop(1,"yellow");

Le code ci-dessus crééra donc un dégradé qui dans sa première moitié ira du rouge vers l’orange, et dans sa deuxième moitié ira de orange vers le jaune.

Si maintenant on assemble tout ça avec le code déja existant, cela donne:

setTimeout(function(){
	var c = document.getElementById('canvas');
	var ctx = c.getContext('2d');
	ctx.font = '85px Knewave';
	ctx.textAlign = 'center';
	var grd=ctx.createLinearGradient(100,0,400,0);
	grd.addColorStop(0,"red");
	grd.addColorStop(0.5,"orange");
	grd.addColorStop(1,"yellow");
	ctx.fillStyle = grd;
	ctx.shadowColor = '#000';
	ctx.shadowBlur = 20;
	ctx.fillText('Summer',250,100);
	ctx.fillText('is magic',250,180);
},1000);

Et nous obtenons :

Les dégradés radiaux

Tout ce qui est radial implique des cercles, et les dégradés radiaux des <canvas> n’échappent pas à cette règle.

Un dégradé radial s’effectue entre deux cercles dont nous précisons les coordonnées du centre ainsi que le rayon. Un exemple étant toujours plus parlant, en voici un:

var grd=ctx.createRadialGradient(250,125,50,250,125,200);

La ligne ci-dessus créé donc un dégradé entre deux cercles: le premier de centre 250,125 et de rayon 50, le deuxième de centre 250,125 et de rayon 200.

L’ajout des couleurs ce fait de la même manière que pour les dégradés linéaires.

Avec le code :

setTimeout(function(){
	var c = document.getElementById('canvas');
	var ctx = c.getContext('2d');
	ctx.font = '85px Knewave';
	ctx.textAlign = 'center';
	var grd=ctx.createRadialGradient(250,125,50,250,125,200);
	grd.addColorStop(0,"red");
	grd.addColorStop(1,"yellow");
	ctx.fillStyle = grd;
	ctx.shadowColor = '#000';
	ctx.shadowBlur = 20;
	ctx.fillText('Summer',250,100);
	ctx.fillText('is magic',250,180);
},1000);

nous obtenons :

Les images

Pour utiliser une image pour remplir un canvas, il faut créer un motif (pattern en anglais).

var pat = ctx.createPattern(img,'no-repeat');

L’image utilisée peut être déjà présente sur la page (dans ce cas il faut préalablement la récupérer à l’aide de document.getElementById) ou alors n’exister que dans le code. C’est la deuxième méthode que je préfère. Pour cela il faut préalablement s’assurer que notre image soit chargée avant de procéder à toute action sur notre <canvas>. Pour cela, il suffit juste d’encadrer notre code agissant sur le <canvas> ainsi:

setTimeout(function(){
	var img = new Image();
	img.onload = function(){
		//Le code contenu dans cette fonction ne sera exécutée que  quand "img" sera chargée
		var c = document.getElementById('canvas');
		var ctx = c.getContext('2d');
		ctx.font = '85px Knewave';
		ctx.textAlign = 'center';
		var pat = ctx.createPattern(img,'no-repeat');
		ctx.fillStyle = pat;
		ctx.shadowColor = '#000';
		ctx.shadowBlur = 20;
		ctx.fillText('Summer',250,100);
		ctx.fillText('is magic',250,180);
	};
	img.src = 'http://thechive.files.wordpress.com/2013/07/summer-girls-13.jpg';
},1000);

Nous obtenons alors le résultat suivant :

Conclusion

Et voilà, vous en savez maintenant assez pour créer de jolis titres en quelques lignes de code.