<html><head><title>Gradients de couleur dans les canvas</title></head><body><h1>Gradients de couleur dans les canvas</h1><p>Un canvas de 300*300 avec un gradient lineaire</p><div class="dessin lineaire"> <canvas id="myCanvas" width="300" height="300"></canvas></div><p>Un canvas de 300*300 avec un gradient circulaire</p><div class="dessin circulaire"> <canvas id="myCanvas" width="300" height="300"></canvas></div><script type="text/javascript">/* Remplissage par un gradient linéaire */var myCanvas=document.querySelector("div.lineaire").querySelector("#myCanvas");var myContext=myCanvas.getContext("2d");var gradient=myContext.createLinearGradient(50, 50, 250, 250);gradient.addColorStop(0, '#fff');gradient.addColorStop(1, '#33f');myContext.fillStyle=gradient;myContext.fillRect(0,0,300,300);/* Affichage des points de contrôle */drawPoint(myContext, 50, 50, "#000"); drawPoint(myContext, 250, 250, "#000"); /* Remplissage par un gradient circulaire */var myCanvas=document.querySelector("div.circulaire").querySelector("#myCanvas");var myContext=myCanvas.getContext("2d");var gradient=myContext.createRadialGradient(50, 50, 90, 100, 70, 180);gradient.addColorStop(0, '#fff'); /* Blanc au départ */gradient.addColorStop(0.10, '#33f'); /* Bleu à 10% du vecteur */gradient.addColorStop(0.75, '#ff0'); /* Jaune à 75% */ gradient.addColorStop(1, '#33f'); /* Bleu pour finir */ myContext.fillStyle=gradient;myContext.fillRect(0,0,300,300);/* Affichage des points de contrôle */myContext.lineWidth=2;myContext.strokeStyle="#000";myContext.beginPath();myContext.arc(50,50,90,0,2*Math.PI);myContext.stroke();myContext.beginPath();myContext.arc(100,70,180,0,2*Math.PI);myContext.stroke();drawPoint(myContext, 50, 50, "#000"); drawPoint(myContext, 100, 70, "#000"); /* Fonction de dessin d'une ligne entre (x1,y1) et (x2,y2) */function drawLine(ctx, x1, y1, x2, y2) { ctx.beginPath(); /* 1er trait de la croix */ ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();}/* Fonction de dessin d'un point sous forme de croix */function drawPoint(ctx, x, y, color) { ctx.save(); /* Sauvegarde du style avant l'appel */ ctx.lineWidth=2; ctx.strokeStyle=color; ctx.setLineDash([]); drawLine(ctx, x-5, y-5, x+5, y+5); drawLine(ctx, x-5, y+5, x+5, y-5); ctx.restore(); /* Le style d'avant l'appel est restauré */}</script><style type="text/css"> div.dessin { background: #fff; padding:5px; text-align: center; }</style></body></html>
Edition 1 | Chapitre 19 : Le dessin et les canvas / Page 256
Edition 2 | Chapitre 20 : Le dessin et les canvas / Page 278
Edition 3 | Chapitre 20 : Le dessin et les canvas / Page 278
En savoir plus
