导航：首页 > 开发技术 >

如何创建微信小程序线性渐变

发表于：2026-10-31 作者：千家信息网编辑

千家信息网最后更新 2026年10月31日，这篇文章主要介绍了如何创建微信小程序线性渐变的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇如何创建微信小程序线性渐变文章都会有所收获，下面我们一起来看看吧。canvasC

千家信息网最后更新 2026年10月31日如何创建微信小程序线性渐变

这篇文章主要介绍了如何创建微信小程序线性渐变的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇如何创建微信小程序线性渐变文章都会有所收获，下面我们一起来看看吧。

canvasContext.createLinearGradient

定义

创建一个线性的渐变颜色。

Tip: 需要使用addColorStop()来指定渐变点，至少要两个。

参数

参数	类型	定义
x0	Number	起点的x坐标
y0	Number	起点的y坐标
x1	Number	终点的x坐标
y1	Number	终点的y坐标

例子

const ctx = wx.createCanvasContext('myCanvas')// Create linear gradientconst grd = ctx.createLinearGradient(0, 0, 200, 0)grd.addColorStop(0, 'red')grd.addColorStop(1, 'white')// Fill with gradientctx.setFillStyle(grd)ctx.fillRect(10, 10, 150, 80)ctx.draw()

关于"如何创建微信小程序线性渐变"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"如何创建微信小程序线性渐变"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。

很赞哦！