才意識(shí)到及時(shí)總結(jié)和做筆記的重要性科平。很多東西都是用的時(shí)候查，用完就忘了姜性，下次還要繼續(xù)查瞪慧，關(guān)鍵是依然看不懂。哎部念，心累弃酌。雖然現(xiàn)在寫了也不一定記住，但是復(fù)制自己寫的代碼總歸容易一點(diǎn)儡炼。
還有妓湘，今晚不想加班啊啊啊啊啊。
讓我回家早睡吧射赛。
再加下去我這一頭茂密的秀發(fā)就要保不住了多柑。
哭唧唧。
image.png
好了好了楣责，哭著也要搬磚竣灌。
我也是參考別人的https://blog.csdn.net/qq_37375882/article/details/79419596。還有php代碼（雖然我看不懂）秆麸，有需要的小伙伴建議參考喔（迷妹臉）初嘹。
關(guān)于canvas寬度自適應(yīng)：https://blog.csdn.net/zSY_snake/article/details/81188128
關(guān)于canvas繪制圓形頭像：https://www.cnblogs.com/-mrl/p/9072009.html
關(guān)于canvas繪制圖片：https://developers.weixin.qq.com/miniprogram/dev/api/CanvasContext.drawImage.html
關(guān)于canvas繪制網(wǎng)絡(luò)圖片：https://blog.csdn.net/qq_30641447/article/details/79377784?from=singlemessage
（現(xiàn)在被我改的很亂，有空再整理主要是參考沮趣，有問題可以評(píng)論問我）
想要的效果圖（紫色的虛線框不知道哪來的屯烦，請(qǐng)忽略。）：
image.png
好了房铭，上我自己的代碼：
<view class='canvas_box'>
<canvas style="margin:0 auto;width:375px; height:596px;" canvas-id="myCanvas" hidden="{{canvasHidden}}"></canvas>
<view class='canvas_btn' bindtap='savetup'>
<image src='/pages/image/btn_bg.png'></image>
保存圖片
</view>
</view>
<view class='canvas_sign'>保存圖片到手機(jī)后驻龟，您可以到朋友圈分享該折扣</view>
page{background:#fff;}
.canvas_box{width:750rpx;height:1140rpx;position:relative;}
.canvas_btn{position:absolute;width:360rpx;height:70rpx;line-height:64rpx;left:196rpx;bottom:-35rpx;text-align:center;color:#fff;z-index:2;}
.canvas_btn image{position:absolute;width:360rpx;height:70rpx;top:0;left:0;z-index:-1 !important;}
.canvas_sign{text-align:center;margin:20rpx 0;color:#959595;margin-top:60rpx;}
data: {
bgImgPath: '/pages/image/cloth.png',//封面大圖
xcxcode:"/pages/image/loved.png",//二維碼
price:'159',//價(jià)格
title:'nazze 日系工裝飛行員冬季夾克男',//標(biāo)題
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
var that = this;
that.setData({
// nickName: app.globalData.userInfo.nickName,
// avatarUrl: app.globalData.userInfo.avatarUrl
nickName: '樂生',
avatarUrl: ''//這是你的頭像地址
})
//1. 請(qǐng)求后端API生成小程序碼
//that.getQr();
//2. canvas繪制文字和圖片
const ctx = wx.createCanvasContext('myCanvas');
var imgPath = '/pages/image/canvas.png';//黃色邊框
var avatarUrl = that.data.avatarUrl;//頭像
var nickName = that.data.nickName;//昵稱
var bgImgPath = that.data.bgImgPath;//封面大圖
var basicprofile = '/pages/image/zhiwen.png';//指紋圖片
var xcxcode = that.data.xcxcode;//二維碼
var price = that.data.price;//價(jià)格
var title=that.data.title;//標(biāo)題
//填充背景（圖片的白色背景）
ctx.setFillStyle('#ffffff');
ctx.fillRect(0, 0, 375, 596);//坐標(biāo)和寬高
// 第一張圖片（黃色邊框）
ctx.drawImage(imgPath, 18, 26, 340, 544);
// 第二張圖片（頭像）
ctx.drawImage(avatarUrl, 158, 47, 60, 60);
//繪制昵稱
ctx.setFontSize(15);
ctx.setFillStyle('#000000');
ctx.fillText(nickName, 173, 127);
//繪制標(biāo)題
ctx.setFontSize(18);
ctx.setFillStyle('#000000');
ctx.fillText('發(fā)起了一個(gè)折扣詳情', 107, 163);
// 第三張圖片（封面大圖）
ctx.drawImage(bgImgPath, 38, 185, 300, 162);
//繪制符號(hào)￥
ctx.setFontSize(15);
ctx.setFillStyle('#DDB039');
ctx.fillText('￥', 160, 379);
//繪制價(jià)格
ctx.setFontSize(26);
ctx.setFillStyle('#DDB039');
ctx.fillText(price, 174, 381);
//繪制標(biāo)題
ctx.setFontSize(15);
ctx.setFillStyle('#000');
ctx.fillText(title, 57, 410);
//繪制一條虛線
// ctx.strokeStyle = 'blue';
// ctx.beginPath();
// ctx.setLineWidth(1);
// ctx.setLineDash([2, 4]);
// ctx.moveTo(10, 287);
// ctx.lineTo(230, 287);
// ctx.stroke();
//繪制指紋圖標(biāo)
ctx.drawImage(basicprofile, 76, 438, 67, 66);
ctx.setFontSize(11);
ctx.setFillStyle('#000');
ctx.fillText('長按識(shí)別小程序碼', 66, 526);
//繪制二維碼
ctx.drawImage(xcxcode, 218, 426, 102, 102);
ctx.draw();
},
savetup: function () {
var that = this;
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 375,
height: 596,
destWidth: 375,
destHeight: 596,
canvasId: 'myCanvas',
success: function (res) {
//調(diào)取小程序當(dāng)中獲取圖片
console.log(res.tempFilePath);
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
wx.showModal({
title: '圖片保存成功！',
content: '請(qǐng)將圖片分享到朋友圈',
showCancel: false,
confirmText: '知道了',
confirmColor: '#72B9C3',
success: function (res) {
if (res.confirm) {
console.log('用戶點(diǎn)擊確定');
}
}
})
}
})
},
fail: function (res) {
console.log(res)
}
})
},
最終效果圖（紅色小心心那里應(yīng)該是二維碼）：
wxc5a2dd32fd69cc6d.o6zAJs8z7fmUIAYqvc_i4B-emrXU.zTkK0qqj7PVGf6f9aa7b4cae6660597986e9b8fa2d05.png
圖片路徑和文字改成自己的缸匪，粘過去就能用翁狐。改改坐標(biāo)啥的就行。如果有疑問請(qǐng)?jiān)u論凌蔬，我已經(jīng)滿腦子漿糊在崩潰的邊緣試探露懒。
加班加到想吐啊啊啊按忱洹（也有可能是奶茶喝多了）
一個(gè)很好用的東西，canvas文字居中：
ctx.setTextAlign('center')
ctx.fillText('這是一段文字', 187 * upx, 122 * upx);//187是中軸線
