这篇文章主要介绍了html5 canvas绘制放射性渐变色效果,需要的朋友可以参考下

效果图展示:

 

canvas有些地方还是有点坑的,比如fillRect是方法不是属性,如果写成fillRect=这样是没效果的,而且还不报错....

这里用到了createRadialGradient这个API 这个API接收6个参数,前三个表示底下的圆,后三个表示上面的圆,返回的实例依然可以用addColorStop

can2_context是getContext的canvas绘图上下文环境

function Radia(bottom_x,bottom_y,bottom_r,top_x,top_y,top_r){
  this.bottom_x=bottom_x;
  this.bottom_y=bottom_y;
  this.bottom_r=bottom_r;
  this.top_x=top_x;
  this.top_y=top_y;
  this.top_r=top_r;
  this.gradient=can2_context.createRadialGradient(this.bottom_x,this.bottom_y,this.bottom_r,this.top_x,this.top_y,this.top_r)
}
Radia.prototype.addColor=function(){
  for(var i=0;i<arguments.length;i++){
    this.gradient.addColorStop(arguments[i].num,arguments[i].color)
 }
}
Radia.prototype.draw=function(x1,y1,x2,y2){
   can2_context.fillStyle=this.gradient;
   can2_context.fillRect(x1,y1,x2,y2)
}
var some1=new Radia(canvas_2.width/2, canvas_2.height-100, 0, canvas_2.width/2, 0, 300)
some1.addColor({num:0.2,color:"blue"},{num:1,color:"yellow"},{num:0.7,color:"white"})
some1.draw(0, 0, canvas_2.width, canvas_2.height)

总结

以上所述是小编给大家介绍的html5 canvas绘制放射性渐变色效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对爱安网网站的支持!

最新资讯
腾讯游戏新征程:打造一个“IP宇宙”

腾讯游戏新征程:打造一

如果说强劲的盈利能力,是腾讯游戏的面子,那将其进行IP化
在无法依靠巨头时 自己做成了巨头

在无法依靠巨头时 自

金山办公登陆科创板上市已有超过一年的时间。在这一年
一起教育科技正式上市 开盘价10.52美元较发行价上涨0.14%

一起教育科技正式上市

以开盘价计算,一起教育科技的市值约为23亿美元。截止北
雷军:一起教育成功登陆纳斯达克 顺为迎来2020年第8起IPO

雷军:一起教育成功登陆

雷军在个人微信公众号发文,祝贺一起教育科技今晚正式在
老罗梦断A股,“真还传”延期杀青

老罗梦断A股,“真还传

前一段闹得沸沸扬扬的罗永浩曲线来A股的事,昨天随着一
蛋壳暴雷自如进场:蛋壳业主和租客改签可减一个月房租

蛋壳暴雷自如进场:蛋壳

蛋壳爆雷后,如何解决租客和房东的“紧张对峙”,已经成为
最新文章
html5 canvas-1.canvas介绍(hello canvas)

html5 canvas-1.canva

大家都知道,目前并不是所有的浏览器中支持html5,就算是
canvas烟花特效锦集

canvas烟花特效锦集

这篇文章主要介绍了canvas烟花特效锦集,小编觉得挺不错
使用Html5、CSS实现文字阴影效果

使用Html5、CSS实现文

这篇文章主要介绍了使用Html5、CSS实现文字阴影效果的
html5 canvas绘制放射性渐变色效果

html5 canvas绘制放射

这篇文章主要介绍了html5 canvas绘制放射性渐变色效果
canvas基础之图形验证码的示例

canvas基础之图形验证

这篇文章主要介绍了canvas基础之图形验证码的示例的相
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能

利用HTML5+css3+jquer

这篇文章主要介绍了利用HTML5+css3+jquery+weui实现仿