小程序 渐变框怎么做
时间: 2023-11-18 17:54:08 浏览: 41
小程序中可以使用 wx.createLinearGradient() 方法创建一个线性渐变对象,然后使用该对象的 addColorStop() 方法添加颜色停止点,最后在绘制时使用该渐变对象即可。
具体实现步骤如下:
1. 创建一个 canvas 组件,并设置它的宽高和 id。
2. 在 js 文件中获取该 canvas 组件,并使用 wx.createCanvasContext() 方法创建一个绘图上下文对象。
3. 使用 wx.createLinearGradient() 方法创建一个线性渐变对象,并使用 addColorStop() 方法添加颜色停止点。
4. 在绘图上下文对象中使用 fillStyle 属性设置填充样式为该渐变对象。
5. 使用 fillRect() 方法绘制一个矩形,即可看到渐变效果。
示例代码如下:
wxml 文件:
<canvas canvas-id="myCanvas" width="300" height="200"></canvas>
js 文件:
Page({
onReady: function () {
const ctx = wx.createCanvasContext('myCanvas')
const grd = ctx.createLinearGradient(0, 0, 300, 0)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')
ctx.fillStyle = grd
ctx.fillRect(0, 0, 300, 200)
ctx.draw()
}
})