html5 canvas繪制放射性漸變色效果
發(fā)布時(shí)間：2018-01-04 15:38:49 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了html5 canvas繪制放射性漸變色效果,需要的朋友可以參考下
效果圖展示：
canvas有些地方還是有點(diǎn)坑的，比如fillRect是方法不是屬性，如果寫成fillRect=這樣是沒效果的，而且還不報(bào)錯(cuò)....
這里用到了createRadialGradient這個(gè)API 這個(gè)API接收6個(gè)參數(shù)，前三個(gè)表示底下的圓，后三個(gè)表示上面的圓，返回的實(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)
總結(jié)
以上所述是小編給大家介紹的html5 canvas繪制放射性漸變色效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
html5 canvas實(shí)現(xiàn)交互式彩色漸變背景動(dòng)畫特效源碼
這是一款基于html5 canvas實(shí)現(xiàn)交互式彩色漸變背景動(dòng)畫特效源碼。畫面上各種顏色交匯呈現(xiàn)顏色之間漸變過渡的效果。同時(shí)，各種顏色的大小、位置、形狀也在不斷的變換中。鼠標(biāo)2017-12-07
html5 canvas繪制的圓形氣泡漸變背景動(dòng)畫特效源碼
這是一款基于html5 canvas繪制的圓形氣泡漸變背景動(dòng)畫特效源碼。背景可呈現(xiàn)出若干圓形氣泡隨機(jī)顯示并呈現(xiàn)出擴(kuò)大、顏色變淺、最終消失等動(dòng)畫漸變效果，且背景色與氣泡顏色也2017-04-11HTML5 Canvas實(shí)現(xiàn)圖片縮放、翻轉(zhuǎn)、顏色漸變的代碼示例
這篇文章主要介紹了HTML5 Canvas實(shí)現(xiàn)圖片縮放、翻轉(zhuǎn)、顏色漸變的代碼示例,充分利用到了坐標(biāo)的操作,說明都寫在代碼注釋里了很簡(jiǎn)明,需要的朋友可以參考下2016-02-28
HTML5 canvas實(shí)現(xiàn)漸變色圓形進(jìn)度條特效源碼
HTML5 canvas實(shí)現(xiàn)漸變色圓形進(jìn)度條動(dòng)畫是一款帶漸變色的圓形進(jìn)度條動(dòng)畫特效jQuery插件jquery-circle-progress，進(jìn)度條使用漸變色來填充2016-02-16
html5使用canvas實(shí)現(xiàn)的圓形漸變進(jìn)度條加載動(dòng)畫特效源碼
這是一款基于html5使用canvas實(shí)現(xiàn)的圓形漸變進(jìn)度條加載動(dòng)畫特效源碼，圓形漸變動(dòng)畫呈現(xiàn)動(dòng)態(tài)變換效果。基于canvas實(shí)現(xiàn)2015-12-22使用javascript和HTML5 Canvas畫的四漸變色播放按鈕效果
這篇文章主要介紹了使用javascript和HTML5 Canvas畫的四漸變色播放按鈕效果,需要的朋友可以參考下2014-04-10html5 Canvas畫圖教程(4)—未閉合的路徑及漸變色的填充方法
一般繪圖的方式有兩種，即填充和描邊，前面的文章已經(jīng)講了描邊的方法stroke，本文就講一下Canvas中填充圖形的方法2013-01-09
