微信小程序基于canvas漸變實(shí)現(xiàn)的彩虹效果示例
本文實(shí)例講述了微信小程序基于canvas漸變實(shí)現(xiàn)的彩虹效果。分享給大家供大家參考，具體如下：
微信小程序提供了兩種漸變的方式：
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è)置的最中心處。
該文如有描述不當(dāng)，煩請(qǐng)各位道友指摘。
希望本文所述對(duì)大家微信小程序開發(fā)有所幫助。
相關(guān)文章
bootstrap datepicker 與bootstrapValidator同時(shí)使用時(shí)選擇日期后無法正常觸發(fā)校驗(yàn)的解
這篇文章主要介紹了bootstrap datepicker 與bootstrapValidator同時(shí)使用時(shí)選擇日期后無法正常觸發(fā)校驗(yàn)的解決思路的相關(guān)資料,需要的朋友可以參考下2016-09-09
JS實(shí)現(xiàn)網(wǎng)頁(yè)端猜數(shù)字小游戲
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)網(wǎng)頁(yè)端猜數(shù)字小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要介紹了JS實(shí)現(xiàn)的RC4加密算法,結(jié)合實(shí)例形式分析基于javascript實(shí)現(xiàn)的RC4加密算法簡(jiǎn)單定義與使用方法,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了使用gulp構(gòu)建前端自動(dòng)化的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
javascript中innerText和innerHTML屬性用法實(shí)例分析
這篇文章主要介紹了javascript中innerText和innerHTML屬性用法,實(shí)例分析了javascript中innerText和innerHTML屬性的作用和相關(guān)的使用技巧,需要的朋友可以參考下2015-05-05
JavaScript簡(jiǎn)單下拉菜單實(shí)例代碼
這篇文章主要介紹了JavaScript簡(jiǎn)單下拉菜單,采用JavaScript定時(shí)函數(shù)遞歸調(diào)用實(shí)現(xiàn)菜單漸顯效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09
uniapp項(xiàng)目實(shí)踐封裝通用請(qǐng)求上傳以及下載方法總結(jié)
在日常開發(fā)過程中,前端經(jīng)常要和后端進(jìn)行接口聯(lián)調(diào),獲取并且渲染數(shù)據(jù)到頁(yè)面中,接下來就總結(jié)一下?uniapp?中獲取請(qǐng)求、文件下載和上傳的一些方法2023-09-09
這篇文章主要介紹了九種原生js動(dòng)畫效果，個(gè)個(gè)都非常精彩，都值得大家學(xué)習(xí)，需要的朋友可以參考下2015-11-11
小程序云開發(fā)如何實(shí)現(xiàn)圖片上傳及發(fā)表文字
這篇文章主要為大家詳細(xì)介紹了小程序云開發(fā)教程，如何實(shí)現(xiàn)圖片上傳及發(fā)表文字，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
使用JavaScript實(shí)現(xiàn)ajax的實(shí)例代碼
實(shí)現(xiàn)ajax之前必須要?jiǎng)?chuàng)建一個(gè) XMLHttpRequest 對(duì)象。這是必須的。那么對(duì)使用js實(shí)現(xiàn)ajax的代碼感興趣的朋友可以參考下本文2016-05-05