<canvas id="myCanvas" width="300" height="300"></canvas>
<script type="text/javascript">
var myCanvas=
document.
getElementById("myCanvas");
var myContext=myCanvas.
getContext("2d");
/* Création du gradient */
var gradient=myContext.
createLinearGradient(50, 50, 200, 250);
gradient.
addColorStop(0, '#000000');
gradient.
addColorStop(1, '#ffffff');
/* Représentation du gradient sur l'ensemble du canvas */
myContext.
fillStyle=gradient;
myContext.
fillRect(0,0,300,300);
/* Représentation du vecteur */
myContext.
strokeStyle="#ff0000";
myContext.
lineWidth=2;
myContext.
beginPath();
myContext.
moveTo(50,50);
myContext.
lineTo(200, 250);
myContext.
stroke();
myContext.
fillStyle="#ff0000";
myContext.
font="15px arial";
myContext.
fillText("Point 0", 55, 50);
myContext.
fillText("Point 1", 205, 250);
/* Création du second gradient */
var gradient2=myContext.
createLinearGradient(50, 50, 200, 250);
gradient2.
addColorStop(0, '#ffa500');
gradient2.
addColorStop(1, '#ffffff');
/* Création d'un rectangle plein avec le second gradient */
myContext.
beginPath();
myContext.
fillStyle=gradient2;
myContext.
fillRect(180,20,110,185);
myContext.
rect(180,20,110,185);
myContext.
stroke();
</script>
Voici comment comprendre le principe de gradient linéaire.
Le vecteur rouge entre les points 1 et 2 crée la diffusion de couleur.
Le fond du canvas est complètement rempli.
Le rectangle rouge est rempli du même gradient mais d'une couleur différente.