欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

html5 canvas绘制放射性渐变色效果

程序员文章站 2023-11-29 15:21:04
这篇文章主要介绍了html5 canvas绘制放射性渐变色效果,需要的朋友可以参考下... 18-01-04...

效果图展示:

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绘制放射性渐变色效果,希望对大家有所帮助