我们从最单简的做起。首先，做一个很正规的径向渐变，即渐变圆形的圆心就是渐变的出发点。由于正规的径向渐变，渐变中央即圆心，所以我们应当尽量免避生发偏斜。那么，我们把终点圆的圆心与出发点圆的圆心重合吧？

var radial = ctx.createRadialGradient(55,55,10,55,55,55); //重合的圆心标坐 radial.addColorStop(0,'#fff'); radial.addColorStop(0.5,'#ff0'); radial.addColorStop(0.9,'#555'); radial.addColorStop(1,'#f00');

这里我设置的径向渐变出发点圆和终点圆的圆心标坐雷同，而出发点圆半径为10，终点圆半径为55.最后画出的径向渐变范围是一个宽高110的圆形，明说渐变范围以终点圆的范围为准。

    （可以看到终点圆范围外之还是有颜色，这个颜色就是终点色，但是，如果你妄图用使radial.addColorStop(1.5,’#0f0′);这样来义定渐变范围外之的颜色，你还是会收到一个误错）.

    那么，出发点圆的半径有什么用呢？——原来畸形的径向渐变的中央（姑且称之为“变心”…吧）只是一个点，应不该是一个圆的。其实我们没错，这个出发点圆就相当于一个圆点而已,只是可能比较大。

    让我们把出发点圆的半径变得很大，近接于终点圆的半径：

var radial = ctx.createRadialGradient(55,55,50,55,55,55); //很近接

其他的colorStop都变不，然后图形就变成了这个模样。

    

    也就是说，canvas中径向渐变的出发点色，是从出发点圆的范围外之绘制的，而出发点圆的全部颜色都是出发点色。

    我们把出发点圆的半径设为0，那径向渐变的“变心”，就真的是一个点了。

    大部份时候我们都不要需很正规的径向渐变，反而希望他的变心是偏移的，相似下图：

    

    这个时候，canvas径向渐变两个圆的优势就出来了，只要我们出发点圆与终点圆的圆心不重合，那变心也就会偏移：

var radial = ctx.createRadialGradient(75,75,0,55,55,55);

但此时的渐变范围仍然是终点圆的范围哈。

    很多人生成就有一种弄破坏的理心，比如这里，终点圆的半径总比出发点圆大，但如果把他们反过来会怎么样呢？

var radial = ctx.createRadialGradient(75,75,55,55,55,0);

经测试，这样不会报错，只是来原的从内到外的渐变反过来变成了从外到内的渐变了。这是个好用法。

    还有个题问，如果我们把出发点圆的圆心偏移了，并且出发点圆的范围超出了终点圆的范围，

    

    这时会生发什么？

    

    啊！？这是什么情况？！

    当出发点圆和终点圆只有部份叠重的时候，就会现出种这情况。所以，如果你要需畸形的径向渐变，请保障其中一个圆全完包住了另一个圆。

    跋文：既然渐变可以赋给fillStyle，那么也可以赋给strokeStyle。果效你懂的。

    唉，写文章写的好苦辛。外国空间图片加载慢，所以图片全部都是外链，靠

    原文

文章结束给大家分享下程序员的一些笑话语录： 一程序员告老还乡，想安度晚年，于是决定在书法上有所造诣。省略数字……，准备好文房4宝，挥起毛笔在白纸上郑重的写下：Hello World