最近在研究小程序生成图片分享功能,感觉那些能够自动生成图片的小程序特别炫酷,特别牛X。但是当你仔细学习下canvas时,发现也就那么回事~
.wxml
<canvas canvas-id="shareCanvas" style="width:300px;height:600px"></canvas>
.js
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {const ctx = wx.createCanvasContext('shareCanvas')ctx.drawImage('../../images/001.jpg', 0, 0, 300, 600);//绘制背景图// 绘制文字ctx.setTextAlign('center') // 文字居中ctx.setFillStyle('#000000') // 文字颜色:黑色ctx.setFontSize(22) // 文字字号:22pxctx.fillText('作者:csdn博客', 150, 300);ctx.stroke();//绘制一条路径,形状是红色的字母 L: 这里可以不要//绘制小程序码ctx.drawImage('../../images/000.jpg', 10, 490, 100, 100)ctx.draw();},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})