html5 canvas draws radioactive gradient color effect

There are still some pitfalls in canvas. For example, fillRect is a method, not an attribute. If you write fillRect=, it will have no effect, and it will not report an error....

The createRadialGradient API is used here. This API receives 6 parameters. The first three represent the bottom circle, and the last three represent the upper circle. The returned instance can still be used with addColorStop.

can2_context is the canvas drawing context of getContext

 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)

The above is the html5 canvas drawing radioactive gradient effect introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!