canvas径向渐变

至于代码的作用我就不写了，我就来写一下关于两个圆的位置会出现什么类型的渐变。由于画图不是很准，凑乎看吧

每组都是先浏览器效果图，然后是原理图

     function draw(id) {

             var canvas = document.getElementById(id);
             if(canvas ==null)return false;
             var context = canvas.getContext('2d');
             var g1 = context.createRadialGradient(100,100,100,100,100,50);
             g1.addColorStop(0.1,'rgb(255,255,0)');
             g1.addColorStop(0.3,'rgb(255,0,255)');
             g1.addColorStop(1,'rgb(0,255,255)');
             context.fillStyle = g1;
             context.fillRect(0,0,500,500);
             context.fill();
        }

    draw('canvas');

var g1 = co

var g1 = context.createRadialGradient(30,30,5,50,50,5);

渐变区(以下都是红色为渐变区域，其他两个颜色没有渐变，一个是渐变开始的颜色，还有渐变结束的颜色)

两圆相离 

ntevar g1 = contex

t.createRadialGradient(30,30,5,50,50,5);t.crvar g1 = context.createRadialGradient(30,30,5,50,50,5);eateRadialGradient(30,30,5,50,50,5);

 var g1 = context.createRadialGradient(30,30,5,100,100,40);

 相离

 

 

var g1 = context.createRadialGradient(30,30,10,50,50,25);

 相交

 

 var g1 = context.createRadialGradient(100,100,100,100,100,50);

 包含

 无论开始是大圆还是小圆，相信看完这四种规律应该可以找出来的。