2023年微信小程序API gradient（如何繪制漸變效果）

在微信小程序中，可以利用API gradient（如何繪制漸變效果）實(shí)現(xiàn)顏色漸變的填充，不僅限于矩形、圓和線等基本圖形，甚至文字也可以應(yīng)用這種效果。

1. 創(chuàng)建漸變對(duì)象

我們提供了兩種顏色漸變的方式：使用createLinearGradient(x, y, x1, y1)來(lái)創(chuàng)建一個(gè)線性的漸變，或者使用createCircularGradient(x, y, r)來(lái)創(chuàng)建一個(gè)從圓心開(kāi)始的漸變。一旦創(chuàng)建出漸變對(duì)象，必須添加兩個(gè)顏色漸變點(diǎn)。

2. 指定顏色漸變點(diǎn)

使用addColorStop(position, color)方法指定顏色漸變點(diǎn)的位置和顏色，其中位置參數(shù)必須位于0到1之間。

3. 應(yīng)用漸變填充

可以使用setFillStyle()和setStrokeStyle()方法指定漸變對(duì)象，并進(jìn)行相應(yīng)的繪圖描述，例如使用fillRect()或者strokeRect()方法。

具體應(yīng)用示例：

使用 createLinearGradient()

const ctx = wx.createCanvasContext('myCanvas')

// 創(chuàng)建一個(gè)線性漸變
const grd = ctx.createLinearGradient(0, 0, 200, 0)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')

// 使用漸變填充矩形
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()

使用 createCircularGradient()

const ctx = wx.createCanvasContext('myCanvas')

// 創(chuàng)建一個(gè)圓形漸變
const grd = ctx.createCircularGradient(75, 50, 50)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')

// 使用漸變填充矩形
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()

以上便是利用微信小程序API gradient實(shí)現(xiàn)漸變效果的方法，開(kāi)發(fā)者們可以根據(jù)自己的需求進(jìn)行相應(yīng)的繪圖操作。

<本文由himall原創(chuàng)，商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)標(biāo)明：himall原創(chuàng)>