HTML5 Canvas drawing of radioactive gradient effect code example

This article mainly introduces the HTML5 canvas to draw the effect of radioactive gradient, the need for friends can refer to, hope to help everyone.

Show:

Canvas some places are still a bit of a pit, such as FillRect is not a property, if written fillrect= this is not effective, and also do not error ....

This API takes 6 parameters, the first three represents the bottom circle, the last three represent the above circle, and the returned instance can still be used Addcolorstop

Can2_context is a canvas drawing context for 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 , 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)