html5 canvas繪製放射性漸層色效果

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; 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},Color({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繪製放射性漸變色效果，希望對大家有幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對VeVb武林網站的支持！