您好,登錄后才能下訂單哦!
這篇文章主要介紹了html5中canvas怎么繪制放射性漸變色效果,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
效果圖展示:
canvas有些地方還是有點坑的,比如fillRect是方法不是屬性,如果寫成fillRect=這樣是沒效果的,而且還不報錯....
這里用到了createRadialGradient這個API 這個API接收6個參數(shù),前三個表示底下的圓,后三個表示上面的圓,返回的實例依然可以用addColorStop
can2_context是getContext的canvas繪圖上下文環(huán)境
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怎么繪制放射性漸變色效果”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。