91.980 visiteurs depuis la création

COMMENT CREER UN DEGRADE DE COULEURS.

par André Marini 2 Février 2015, 11:37 Astuces de blogueur

Comment créer un dégradé de couleurs.

CODE

<p><canvas height="200px" id="exCanvas1" style="border:dotted 1px black;" width="500px"> Balise canvas non supportée ... </canvas> <script type="text/javascript">
//<![CDATA[
var canvas=document.getElementById('exCanvas1');
var ctx=canvas.getContext('2d');
var grd1=ctx.createLinearGradient(0,0,200,0);
grd1.addColorStop(0.3,'silver');
grd1.addColorStop(0.9,'steelblue');
ctx.fillStyle=grd1;
ctx.fillRect(0,0,500,200);
//]]>
</script></p>

<canvas></canvas> indique le cadre dont il faut fixer les dimensions "height" et "width" ainsi que la bordure "border".

Quand ce cadre est fixé, il faut le rempir, aux mêmes dimensions bien entendu.

C'est ce que l'on retrouve ici ctx.fillRect(0,0,500,200);

Silver et steelblue indiquent les couleurs du dégradé qui va de l'argent au bleu.

RESULTAT