主页 > 知识库 > html5 canvas绘制放射性渐变色效果

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

热门标签:鹤壁手机自动外呼系统怎么安装 漳州人工外呼系统排名 跟电销机器人做同事 中绅电销智能机器人 济南办理400电话 威海营销外呼系统招商 农村住宅地图标注 郑州电销外呼系统违法吗 ai电销机器人连接网关

效果图展示:

 

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绘制放射性渐变色效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

标签:红河 甘南 文山 萍乡 咸阳 惠州 营口 苏州

巨人网络通讯声明:本文标题《html5 canvas绘制放射性渐变色效果》,本文关键词  html5,canvas,绘制,放射性,;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 下面列出与本文章《html5 canvas绘制放射性渐变色效果》相关的同类信息!
  • 本页收集关于html5 canvas绘制放射性渐变色效果的相关信息资讯供网民参考!
  • 推荐文章