前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

HTML绘制渐变图形(二)(html中渐变)

除了线性渐变以外,HTML 5 Canvas API还支持径向渐变(放射性渐变),就是颜色会介于两个指定圆间的锥形区域平滑变化。径向渐变和线性渐变使用了颜色终止点是一样的,如果要实现它,就需要使用方法createRadialGradient。

绘制径向渐变

createRadialGradient(x0,y0,r0,x1,y1,r1)方法表示沿着两个圆之间的锥面绘制渐变。其中前三个参数代表开始的圆,圆心为(x0,y0),半径为r0。最后三个参数代表结束的圆,圆心为(x1,y1),半径为r1。

(1)编写代码如下图所示,在<body>标签中加入以下代码。

(2)在浏览器中打开文件,预览效果图如下所示,可以看到网页中,从圆心的中心亮点开始向外逐步发散,形成了一个径向渐变。

小提示:上面代码中,首先创建渐变对象gradient,此处使用方法createRadialGradient创建了一个径向渐变,下面使用addColorStop添加颜色,最后将渐变填充到上下文环境中。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言