createLinearGradient(x0,y0,x1,y1)

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

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

  我们知道通过对象方法setFillStyle可以填充一个图画的背景颜色,但是,这个方法不能实现渐变,例如,从左到右颜色渐变色,就像看到某些网站里面从上到下两边的颜色渐变一样。

  实现颜色的渐变是由微信小程序里面提供的createLinearGradient来实现的。

  但是,这个方法必须配合addColorStop()使用才可以实现渐变。


示例:

  要求:创建一个从左到右颜色由绿色变成浅绿色的渐变色。

//.wxml
<canvas canvas-id="myCanvas"/>
<button type="default" bindtap="createimage">点击设置</button>

//.js
Page({
  createimage: function () {

    const ctx = wx.createCanvasContext('myCanvas')
    // 创建线性渐变
    const grd = ctx.createLinearGradient(0, 0, 200, 0)
    grd.addColorStop(0, 'green')
    grd.addColorStop(1, 'white')

    // 填充渐变色
    ctx.setFillStyle(grd)
    ctx.fillRect(10, 10, 150, 80)
    ctx.draw()

  }
  })

结果:

渐变色


代码解释:

  从上面的代码可以看出,上面的线性渐变实现过程是:先用createLinearGradient创建一个渐变的颜色(示例是绿色),然后,把创建的这个线性渐变色赋给一个常量gry,然后,这个常量作为对象方法ctx.setFillStyle(grd)的参数进行颜色填充,这样就实现了线性渐变。

  其核心还是通过方法setFillStyle(grd)进行填充实现的。