效果圖如下：

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;  
}