按月归档:2012年三月月

HTML5中的Canvas(径向渐变)

说明完了线性渐变,我们再来看看径向渐变,其实我觉得两者是一回事儿……只不过径向渐变的浏览器兼容性更糟糕一些(现在已经好多了),为了不出洋相,我们还是要多知道一些。

什么是径向渐变

又要解释一下什么叫径向渐变,其实就是环形的渐变了,由圆心(或者是较小的同心圆)开始向外扩散渐变的效果,听着有些抽象,往下看图一下子就明白了。线性渐变指定了起点和终点,径向渐变则指定了开始的结束园的圆心和半径。这里使用createRadialGradient来获得Canvas的CanvasGradient对象,所以addColorStop方法也是通用的。

的使用方法,首先是利用createRadialGradient方法指定渐变的首末圆得到CanvasGradient对象,再对这个对象使用addColorStop方法指定各个位置的颜色。最后,将CanvasGradient对象作为fillStyle使用,反正和LinearGradient一回事儿就是了。

炸面包圈……

效果见左图,这个“面包圈”的中心在(70, 70)处,内部半径为20,外部半径为70。然后定义的渐变为从小圆到大圆,分别为红、黄、蓝。我们这里是画了一个矩形,但是因为填充的是圆形,所以最终效果看起来是圆的。

观察这个图片,我们能看到虽然我们是从半径20的地方开始定义的,但是20以内的颜色也是开始的红色,这样的表现是很普遍的(也就是未定义地方的颜色则沿用最近的色彩),但是记住这并不是一定的,HTML5的规范中并没有规定这些“三不管”地区应该表现成什么颜色,事实上,早期的Opera浏览器上,同样的代码的结果是下图展示的这样,也就是,它透明了~

这并不是最悲剧的,让大家感激涕零的excanvas并没有很好的支持径向渐变(我估计是VML没有这个功能的关系),所以它很可怜的圆形变成了方形…… 所以我们知道了,如果你需要在IE9一下的浏览器上使用Canvas的话,不要用径向渐变,除非你想给用户制造惊喜!

OK,关于颜色,我们就说到这里了,接下来我们得依靠别人的劳动成果了——HTML5中的Canvas(图像)