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

这篇文章主要介绍了html5中canvas怎么绘制放射性渐变色效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

平桂ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！

效果图展示：

 

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怎么绘制放射性渐变色效果
网页路径：https://www.cdcxhl.com/article6/gcdcig.html

成都网站建设公司_创新互联，为您提供小程序开发、ChatGPT、服务器托管、网站设计公司、定制网站、全网营销推广

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联