微信小程序基于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è)從圓心開(kāi)始的漸變。
x，y 圓心坐標(biāo)
r 半徑
創(chuàng)建了漸變對(duì)象之后，必須添加兩個(gè)或者兩個(gè)以上的漸變點(diǎn)；
addColorStop(position, color)方法用于指定顏色漸變點(diǎn)的位置和顏色，位置必須位于0到1之間。
一般用setFillStyle()來(lái)設(shè)置漸變，然后進(jìn)行畫(huà)圖描述。
使用 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ì)大家微信小程序開(kāi)發(fā)有所幫助。
相關(guān)文章
escape()、encodeURI()、encodeURIComponent()三種方法都能對(duì)一些影響URL完整性的特殊字符進(jìn)行過(guò)濾。2010-11-11
這篇文章主要介紹了PHPExcel中的一些常用方法匯總,本文直接給出操作代碼實(shí)例,代碼中對(duì)常用方法給出了注釋,需要的朋友可以參考下2015-01-01
JavaScript偽數(shù)組和數(shù)組的使用與區(qū)別
這篇文章主要給大家介紹了關(guān)于JavaScript偽數(shù)組和數(shù)組使用與區(qū)別的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
深入理解移動(dòng)前端開(kāi)發(fā)之viewport
這篇文章主要介紹了移動(dòng)前端開(kāi)發(fā)之viewport的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
TypeScript 學(xué)習(xí)筆記之基本類(lèi)型
TypeScript 是 JavaScript 的超集，TypeScript 經(jīng)過(guò)編譯之后都會(huì)生成 JavaScript 代碼。TypeScript 最大的特點(diǎn)就是類(lèi)型化，因此才叫做 TypeScript。比起弱類(lèi)型的 JavaScript，類(lèi)型化的 TypeScript 顯得更加容易維護(hù)。2015-06-06
JavaScript將頁(yè)面表格導(dǎo)出為Excel的具體實(shí)現(xiàn)
如何將頁(yè)面表格導(dǎo)出為Excel，這在日常工作中很常見(jiàn)，下面為大家詳細(xì)的介紹下使用JavaScript是如何實(shí)現(xiàn)的2013-12-12
這篇文章主要介紹了詳解javascript數(shù)組去重問(wèn)題，根據(jù)面試時(shí)做的一道數(shù)組去重問(wèn)題的解題思路整理的，分享給大家。2015-11-11
JavaScript日期和時(shí)間的格式化及其它常用處理方法
這篇文章主要給大家介紹了關(guān)于JavaScript日期和時(shí)間的格式化及其它常用處理方法,JavaScript中可以使用Date對(duì)象來(lái)表示日期和時(shí)間,如果需要格式化日期和時(shí)間,可以使用Date對(duì)象的幾個(gè)方法和一些字符串操作方法來(lái)實(shí)現(xiàn),需要的朋友可以參考下2023-09-09
實(shí)現(xiàn)JS拖拽插件主要從六個(gè)方面做介紹：一、js拖拽插件的原理，二、根據(jù)原理實(shí)現(xiàn)的最基本效果，三、代碼抽象與優(yōu)化，四、擴(kuò)展：有效的拖拽元素，五、性能優(yōu)化和總結(jié)，六、jquery插件化 ,需要的朋友可以參考下2015-08-08
在js中將中文用gb2312編碼。如，“我”編碼后應(yīng)該是“%CE%D2”。2009-12-12