El método createRadialGradient crea una gradiente radial. La gradiente radial se crea con dos pares de coordenadas (x1,y1) a (x2,y2). Luego se especifica el radio de inicio y el radio final.
lienzo.createRadialGradient(comienzo x,comienzo y, radio de comienzo,x final, y final radio final)
Graficaremos un círculo con gradiente radial:
<!DOCTYPE HTML>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
<script type="text/javascript">
function retornarLienzo(x) {
var canvas = document.getElementById(x);
if (canvas.getContext) {
var lienzo = canvas.getContext("2d");
return lienzo;
} else
return false;
}
function dibujar() {
var lienzo=retornarLienzo("lienzo1");
if (lienzo) {
var gradiente1=lienzo.createRadialGradient(200,200,0,200,200,200);
gradiente1.addColorStop(0,"rgb(255,0,0)");
gradiente1.addColorStop(1,"rgb(0,0,255)");
lienzo.fillStyle=gradiente1;
lienzo.arc(200,200,100,0,Math.PI*2,true);
lienzo.fill();
}
}
</script>
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="600" height="600">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>
El resultado en el navegador al cargar esta página es:
