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
Haut de page
commentaires