除了线性渐变以外,HTML 5 Canvas API还支持径向渐变(放射性渐变),就是颜色会介于两个指定圆间的锥形区域平滑变化。径向渐变和线性渐变使用了颜色终止点是一样的,如果要实现它,就需要使用方法createRadialGradient。
绘制径向渐变
createRadialGradient(x0,y0,r0,x1,y1,r1)方法表示沿着两个圆之间的锥面绘制渐变。其中前三个参数代表开始的圆,圆心为(x0,y0),半径为r0。最后三个参数代表结束的圆,圆心为(x1,y1),半径为r1。
(1)编写代码如下图所示,在<body>标签中加入以下代码。
(2)在浏览器中打开文件,预览效果图如下所示,可以看到网页中,从圆心的中心亮点开始向外逐步发散,形成了一个径向渐变。
小提示:上面代码中,首先创建渐变对象gradient,此处使用方法createRadialGradient创建了一个径向渐变,下面使用addColorStop添加颜色,最后将渐变填充到上下文环境中。