<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.
createRadialGradient(100,100, 200, 200, 200, 40);
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 des 2 cercles */
myContext.
strokeStyle="#ff0000";
myContext.
lineWidth=2;
myContext.
beginPath();
myContext.
arc(100, 100, 200, 0, 2*
Math.
PI);
myContext.
stroke();
myContext.
beginPath();
myContext.
arc(200, 200, 40, 0, 2*
Math.
PI);
myContext.
stroke();
/* Création du second gradient */
var gradient2=myContext.
createRadialGradient(100,100, 200, 200, 200, 40);
gradient2.
addColorStop(0, '#00f');
gradient2.
addColorStop(1, '#ffffff');
/* Création d'une ligne pleine avec le second gradient */
myContext.
beginPath();
myContext.
strokeStyle=gradient2;
myContext.
lineWidth=10;
myContext.
moveTo(0,0);
myContext.
lineTo(300,200);
myContext.
stroke();
</script>
Schéma pour comprendre les gradient circulaires.
La ligne de gradient bleu, reprend le gradient circulaire défini par les 2 cercles.