举报投诉联系我们 手机版 热门标签 鳄鱼CMS
您的位置:鳄鱼CMS > 微信小程序渐变色 微信小程序API gradient(如何绘制渐变效果)

微信小程序渐变色 微信小程序API gradient(如何绘制渐变效果)

2023-04-17 18:31

微信小程序渐变色 微信小程序API gradient(如何绘制渐变效果)

微信小程序渐变色 微信小程序API gradient(如何绘制渐变效果)

微信小程序渐变色

微信小程序 canvas接口和方法绘图接口和方法


渐变


渐变能用于填充一个矩形,圆,线,文字等。填充色可以不固定位固定的一种颜色。

我们提供了两种颜色渐变的方式:

  • createLinearGradient(x, y, x1, y1)- 创建一个线性的渐变
  • createCircularGradient(x, y, r)- 创建一个从圆心开始的渐变

一旦我们创建了一个渐变对象,我们必须添加两个颜色渐变点。

addColorStop(position, color)方法用于指定颜色渐变点的位置和颜色,位置必须位于0到1之间。

可以用setFillStyle()setStrokeStyle()方法设置渐变,然后进行画图描述。

使用 createLinearGradient()

const ctx = wx.createCanvasContext("myCanvas")

// Create linear gradient
const grd = ctx.createLinearGradient(0, 0, 200, 0)
grd.addColorStop(0, "red")
grd.addColorStop(1, "white")

// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()



使用 createCircularGradient()

const ctx = wx.createCanvasContext("myCanvas")

// Create circular gradient
const grd = ctx.createCircularGradient(75, 50, 50)
grd.addColorStop(0, "red")
grd.addColorStop(1, "white")

// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()


微信小程序 canvas接口和方法绘图接口和方法

阅读全文
以上是鳄鱼CMS为你收集整理的微信小程序渐变色 微信小程序API gradient(如何绘制渐变效果)全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 鳄鱼CMS eyucms.com 版权所有 联系我们