canvas绘制放射性渐变

综合编程 2017-12-28

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)

您可能感兴趣的

multiple canvas at same location using javascript I am trying to make a application one of the module is displaying a multiple canvas at same location. This canvas is used to display graph. I have 2 b...
今天这个仇先记下来了(深入版) 之前看到这个掘金的文章今天这个仇先记下来了,觉得挺有趣的,但是他是基于别人已经封装好的框架html2canvas来实现的。本着学习的态度,就用react和canvas原生api重新撸了一遍,在其中遇到了不少坑,也让自己学习到了不少姿势。 在线地址 , 项目地址 。 项目效果: ...
可视化n次贝塞尔曲线及过程动画演示–大宝剑... 先抛一个动画模拟的一个例子,吊一吊Xing趣(4次) 不够强?再来一个 这样子,满足你。demo说明 git仓库地址示例 我眼睛花,没看懂,能暂停不了? 可以控制动画暂停与继续。(供大家清楚地时刻看到每一帧) ...
Drawing a curved image with a HTML5 canvas and Jav... While building an online graphic editor based on FabricJS for one of our customers at Prestimedia , I ran into the need of showing a preview image cu...
Manage Your JavaScript Canvas Elements The browser JavaScript ecosystem moves fast . It’s easy to become overwhelmed trying to keep up with new browser features and JavaScript application ...