渐变色canvas-微信小程序

效果图如下：

index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    windowWidth:null,
    windowHeight:null,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      windowWidth: wx.getSystemInfoSync().windowWidth,
      windowHeight: wx.getSystemInfoSync().windowHeight
    }) 
    const ctx1 = wx.createCanvasContext('myCanvas1')
    this.grad(ctx1, 'rgb(253, 151, 48)', 'white')
    this.casDrawImage(ctx1, 'images/head.jpg')
    this.casFont(ctx1,'顺丰快递求领','联系人:blingfeng123')
    ctx1.draw()
    const ctx2 = wx.createCanvasContext('myCanvas2')
    this.grad(ctx2,'rgb(242, 69, 63)','white')
    this.casDrawImage(ctx2, 'images/head.jpg')
    ctx2.draw()
    const ctx3 = wx.createCanvasContext('myCanvas3')
    this.grad(ctx3,'rgb(39, 167, 233)','white')
    this.casDrawImage(ctx3, 'images/head.jpg')
    ctx3.draw()
    const ctx4 = wx.createCanvasContext('myCanvas4')
    this.grad(ctx4, 'rgb(45, 222, 160)', 'white')
    this.casDrawImage(ctx4, 'images/head.jpg')
    ctx4.draw()
    const ctx5 = wx.createCanvasContext('myCanvas5')
    this.grad(ctx5, 'rgb(45, 222, 160)', 'white')
    this.casDrawImage(ctx5, 'images/head.jpg')
    ctx5.draw()
    const ctx6 = wx.createCanvasContext('myCanvas6')
    this.grad(ctx6, 'rgb(45, 222, 160)', 'white')
    this.casDrawImage(ctx6, 'images/head.jpg')
    ctx6.draw()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  casDrawImage :function(ctx,imageUrl){
    ctx.drawImage(imageUrl, 30, 30, 60, 60)
  },
  grad :function(ctx,color,colorstop){
    // 创建线性渐变
    const grd = ctx.createLinearGradient(0, 0, 500, 0)
    grd.addColorStop(0, color)
    grd.addColorStop(1, colorstop)
    ctx.setFillStyle(grd)
    ctx.fillRect(15, 10, 700, 250)
  },
  casFont:function(ctx,title,content){
    ctx.setFontSize(17)
    ctx.setFillStyle('white')
    ctx.fillText(title, 120, 50)
    ctx.fillText(content, 120, 80)
  }

})

index.wxml

<canvas canvas-id="myCanvas1" style='width:700rpx;height:250rpx'/>
<canvas canvas-id="myCanvas2" style='width:700rpx;height:250rpx'/>
<canvas canvas-id="myCanvas3" style='width:700rpx;height:250rpx'/>
<canvas canvas-id="myCanvas4" style='width:700rpx;height:250rpx'/>
<canvas canvas-id="myCanvas5" style='width:700rpx;height:250rpx'/>
<canvas canvas-id="myCanvas6" style='width:700rpx;height:250rpx'/>
<image src='images/right.png' class='circle-float'></image>

index.wxss

.circle-float{  
  color: #ffffff;  
  position: fixed;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  bottom: 20rpx;  
  right: 20rpx;  
  width: 100rpx;  
  height: 100rpx;  
  border-radius: 50%;  
  font-size: 28rpx;  
}