⼩程序⽤canvas画图并分享最近开始做⼩程序，有这样⼀个需求：
从列表页进⼊详情，在每⼀个详情页⾯去分享，分享出来的图⽚是带有当前详情数据的图⽚
如下图的列表：
分享出来的样⼦：
解决⽅案和思路：canvas画图⽣成图⽚
上代码：
【html部分】
<canvas style='width:{{canvasWidth}}px;height:{{canvasHeight}}px' canvas-id='myCanvas'></canvas>
<button open-type='share'>分享</button>
【js部分】
var ctx = "" // ⽤于获取canvas
var leftMargin = "" //⽂字距离左边边距
var topMargin = "" //⽂字距离右边边距
Page({
/**
* 页⾯的初始数据
*/
data: {
title: '⼈⼈车司机',
salary: '500-8000元/⽉',
rtype: '⽇结',
rmoney: '20元',
canvasWidth: '', // canvas宽度
canvasHeight: '', // canvas⾼度
imagePath: '' // 分享的图⽚路径
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function (options) {
var that = this
var sysInfo = wx.getSystemInfo({
success: function (res) {
that.setData({
//设置宽⾼为屏幕宽，⾼为屏幕⾼的80%，因为⽂档⽐例为5:4
canvasWidth: res.windowWidth,
canvasHeight: res.windowWidth * 0.8
})
leftMargin = res.windowWidth
topMargin = res.windowWidth * 0.8
},
})
},
/**
* ⽣命周期函数--监听页⾯初次渲染完成
*/
onReady: function () {
ctx = wx.createCanvasContext('myCanvas')
this.addImage()
},
//画背景图
addImage: function () {
var context = wx.createContext();
var that = this;
var path = "/images/share.jpg";
//将模板图⽚绘制到canvas，在开发⼯具中drawImage()函数有问题，不显⽰图⽚ //不知道是什么原因，⼿机环境能正常显⽰
ctx.drawImage(path, 0, 0, this.data.canvasWidth, this.data.canvasHeight);
this.addTitle()
this.addRtype()
this.addRmoney()
this.addSalary()
ctx.draw()
},
//画标题
addTitle: function (){
var str = this.data.title
ctx.font = 'normal bold 20px sans-serif';
ctx.setTextAlign('center'); // ⽂字居中
ctx.setFillStyle("#222222");
ctx.fillText(str, this.data.canvasWidth/2,65)
},
// 画返费⽅式
addRtype: function () {
var str = pe
ctx.setFontSize(16)
ctx.setFillStyle("#ff4200");
ctx.setTextAlign('left');
ctx.fillText(str, leftMargin * 0.35, topMargin * 0.4)
},
// 画返费⾦额
addRmoney: function () {
var str =
ctx.setFontSize(16)
ctx.setFillStyle("#222");
ctx.setTextAlign('left');
ctx.fillText(str, leftMargin * 0.35, topMargin * 0.5) },
// 画薪资
addSalary: function () {
var str = this.data.salary
ctx.setFontSize(16)
ctx.setFillStyle("#222");
ctx.setTextAlign('left');
ctx.fillText(str, leftMargin * 0.35, topMargin * 0.61) },
/**
写文章的小程序* ⽤户点击右上⾓分享
*/
onShareAppMessage: function (res) {
// return eventHandler接收到的分享参数
return {
title: this.data.title,
path: '/pages/test/test',
imageUrl: this.data.imagePath
};
},
//导出图⽚
tempFilePath: function(){
let that = this;
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function success(res) {
wx.saveFile({
tempFilePath: pFilePath,
success: function success(res) {
that.setData({
imagePath: res.savedFilePath
});
}
});
}
});
},
/**
* ⽣命周期函数--监听页⾯显⽰
*/
onShow: function () {
},
/**
* ⽣命周期函数--监听页⾯隐藏
*/
onHide: function () {
},
/**
* ⽣命周期函数--监听页⾯卸载
*/
onUnload: function () {
},
/**
* 页⾯相关事件处理函数--监听⽤户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页⾯上拉触底事件的处理函数
*/
onReachBottom: function () {
}
})
为⼤家推荐现在关注度⽐较⾼的⼩程序教程⼀篇：⼩编为⼤家精⼼整理的，希望喜欢。以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。