私域电商软件及相关增值服务提供商    

免费试用
2023年微信小程序API 绘图createLinearGradient(创建线性渐变)
作者: --时间: 2025-06-26 22:57:34 阅读量:

微信小程序API中,createLinearGradient方法可以创建一个线性的渐变颜色。使用addColorStop()方法指定渐变点,并至少需要两个。下面是该方法的参数和示例:

1. 参数

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

2. 示例

const ctx = wx.createCanvasContext('myCanvas')

// 创建线性渐变
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()

除了createLinearGradient方法,微信小程序提供了很多有用的绘图接口和方法,比如createCircularGradient、setStrokeStyle和setShadow等,这些方法可以帮助开发者创建更加丰富多彩的小程序页面。

一套系统全搞定
  • 商家管理
  • 商品管理
  • 订单管理
  • 会员管理
  • 营销中心
  • 供应链入驻
  • 财务管理
  • 支付分账
  • 商城直播
免费试用
更多产品任你选
B2B2C多用户商城系统

类天猫&京东模式系统

了解更多
B2B2B电商交易系统

全渠道订货/采购及经销商管
理数字化系统

了解更多
S2B2B电商交易系统

上下游资源整合数字化解决方

了解更多
企业集采商城系统

中大型企业数字化采购与交易
系统

了解更多
员工福利商城系统

集福利管理、发放于一体的员
工福利商城

了解更多

电话咨询 微信咨询 0元开店