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