基于画布渐变的微信小程序实现彩虹效果示例

本文描述了基于画布渐变的微信小程序彩虹效果。分享给大家参考，如下：

微信小程序提供两种渐变方式：

创建线性渐变(x，y，x1，y1)以创建线性渐变。

x，y起点坐标

X1，y1端点坐标

CreateCircularGradient(x，y，r)从圆心创建一个渐变。

x，y中心坐标

半径r

创建渐变对象后，必须添加两个或更多渐变点；

AddColorStop(位置，颜色)方法用于指定颜色渐变点的位置和颜色，位置必须在0到1之间。

一般用setFillStyle()来设置渐变，然后用画图来描述。

使用createLinearGradient()

const CTX=wx . createcanvascontext(' my canvas ')//创建线性gradientconst grd=CTX . createlinegradient(0，120，120，0)grd.addColorStop(0 '，#FFFF00')grd.addColorStop(1 '，#FF0000')//用gradientctx.setFillStyle(grd)填充；//将渐变颜色渲染成方形ctx.fillRect(20，20，120，120)；//起点坐标为(20，20)，长宽为120px的正方形CTX . draw()；

使用create圆形渐变()

const CTX=wx . createcanvascontext(' my canvas ')//Create circular gradient const grd=CTX . createcircular gradient(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，' # ffffff00 ')grd . AddColorStop(0.93，' #FF7F00 ')

补充：addColorStop的位置是渐变点的位置，是颜色设置的中心。

本文如有不当描述，请批评各位道友。

希望本文对微信小程序的开发有所帮助。