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