HTML5 Canvas 起步(3) - 颜色与渐变（3）

2.2 径向渐变

与线性的用法类似，它的函数签名如下：

CanvasGradient createRadialGradient(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1);

与线性渐变不同的是，径向渐变除了要指定起始位置和终止位置外，还需要指定起始半径和终止半径。使用不同中心点的径向渐变可以实现类似光照的效果，不过目前 Chrome 对不同中心点的径向渐变支持不好，在 Chrome 中只会使用第二个中心点进行径向渐变，测试发现在最新开发版 Chrome 3.0.184.0 (17842) 中仍是如此。

在下图中可以看到，主流支持 Canvas 的浏览器都能正确渲染中心点不同的径向渐变，而 Chrome 则只能使用第二个中心点进行渲染。

<canvas id="canvas" width="600" height="500"></canvas><script type="text/javascript">    var canvas = document.getElementById("canvas");    var ctx = fixContext(canvas.getContext("2d"));    // fill a rectangle whit sepecified fill style    function fillRect(color, x, y, w, h) {        ctx.fillStyle = color;        ctx.fillRect(x || 0, y || 0, w || 150, h || 100);        ctx.font = "10pt Arial";        ctx.fillStyle = "white";        ctx.fillText(color, 6, 20);    }    ctx.translate(50, 50);    // 同中心，从绿色渐变到白色完全透明，并指定给填充色    var gradient = ctx.createRadialGradient(50, 50, 0, 50, 50, 100);    gradient.addColorStop(0, 'white');    gradient.addColorStop(1, 'green');    fillRect(gradient, -50, -50, 300, 200);    // 第二次填充，矩形区域颜色加深    fillRect(gradient);        ctx.translate(250, 0);    // 不同中心，从绿色渐变到白色完全透明，并指定给填充色    var gradient = ctx.createRadialGradient(0, 0, 10, 50, 50, 100);    gradient.addColorStop(0, 'white');    gradient.addColorStop(1, 'green');    fillRect(gradient, -50, -50, 200, 200);    // 第二次填充，矩形区域颜色加深    fillRect(gradient);</script>[提示：你可先修改部分代码，再按运行]

小结

总的来说，Canvas 中的颜色使用与使用 CSS 进行颜色定义没有什么区别，但比较强大的是 Canvas 支持渐变，这样就可以通过 Canvas 来做一些比较炫的效果。

这篇拖的太久了，已经有些忘了，先结束掉这部分再继续写了……

参考资料

1. The Canvas Element, WHATWG