SOURCE

var canvas = document.getElementById('canvas1');

var ctx = canvas.getContext('2d');

//当cycle1在cycle2里边时，并且圆心重合

var cycle1 = {

x: 200,

y: 200,

r: 25

};

var cycle2 = {

x: 200,

y: 200,

r: 80

};

ctx.beginPath();

ctx.arc(cycle1.x, cycle1.y, cycle1.r, 0, Math.PI * 2, false);

ctx.stroke();

ctx.beginPath();

ctx.arc(cycle2.x, cycle2.y, cycle2.r, 0, Math.PI * 2, false);

ctx.stroke();

//使用经向渐变

var grd = ctx.createRadialGradient(cycle1.x, cycle1.y, cycle1.r, cycle2.x, cycle2.y, cycle2.r);

grd.addColorStop(0, 'rgba(255,0,0,0.75)');

grd.addColorStop(0.5, 'rgba(0,255,0,0.75)');

grd.addColorStop(1, 'rgba(0,0,255,0.75)');

ctx.fillStyle = grd;

ctx.fillRect(0, 0, 500, 500);

<canvas id="canvas1" width=" 400" height="400">抱歉，你的浏览器版本不支持canvas</canvas>