<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

// 创建径向渐变

var grd=ctx.createRadialGradient(150,150,5,150,150,100);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// 填充渐变

ctx.fillStyle=grd;

ctx.fillRect(50,50,250,250);