您好,登錄后才能下訂單哦!
這篇文章主要介紹微信小程序中如使用canvas漸變實(shí)現(xiàn)彩虹效果,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
具體如下:
微信小程序提供了兩種漸變的方式:
createLinearGradient(x,y,x1,y1)
創(chuàng)建一個(gè)線性的漸變。
x,y 起點(diǎn)坐標(biāo)
x1,y1 終點(diǎn)坐標(biāo)
createCircularGradient(x,y,r)
創(chuàng)建一個(gè)從圓心開始的漸變。
x,y 圓心坐標(biāo)
r 半徑
創(chuàng)建了漸變對(duì)象之后,必須添加兩個(gè)或者兩個(gè)以上的漸變點(diǎn);
addColorStop(position, color)
方法用于指定顏色漸變點(diǎn)的位置和顏色,位置必須位于0到1之間。
一般用setFillStyle()
來設(shè)置漸變,然后進(jìn)行畫圖描述。
使用 createLinearGradient()
const ctx = wx.createCanvasContext('myCanvas') // Create linear gradient const grd = ctx.createLinearGradient(0,120, 120, 0) grd.addColorStop(0, '#FFFF00') grd.addColorStop(1, '#FF0000') // Fill with gradient ctx.setFillStyle(grd);//將漸變色渲染入正方形 ctx.fillRect(20, 20, 120, 120);//起點(diǎn)坐標(biāo)為(20,20),長(zhǎng)寬都為120px的正方形 ctx.draw();
使用 createCircularGradient()
const ctx = wx.createCanvasContext('myCanvas') // Create circular gradient const grd = ctx.createCircularGradient(170, 170, 150); grd.addColorStop(0.79, '#fff') grd.addColorStop(0.81, '#8B00FF') grd.addColorStop(0.83, '#0000FF') grd.addColorStop(0.85, '#00FFFF') grd.addColorStop(0.87, '#00FF00') grd.addColorStop(0.89, '#FFFF00') grd.addColorStop(0.93, '#FF7F00') grd.addColorStop(0.95, '#FF0000') grd.addColorStop(1, '#fff') // Fill with gradient ctx.setFillStyle(grd)//將漸變色渲染入矩形 ctx.fillRect(20, 20, 300,120)//起點(diǎn)坐標(biāo)為(20,20),長(zhǎng)300px寬120px的矩形 ctx.draw()
補(bǔ)充:addColorStop
的position為漸變點(diǎn)的位置,該位置是顏色設(shè)置的最中心處。
以上是“微信小程序中如使用canvas漸變實(shí)現(xiàn)彩虹效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。