效果图如下：
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; }
