canvas遇到的坑 1.文字换行 2.真机不能使用网络数据图片（真坑） 点击显示效果我就不写了，你们可以自己加一下
全部代码贴出来
css #preview { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); position: fixed; z-index: 999; top: 0; overflow: hidden; bottom: 0; } #preview button { width: 43%; position: absolute; bottom: 218rpx; left: 28%; z-index: 5; border-radius: 37rpx; height: 66rpx; line-height: 66rpx; background: #fd5b4c; } #preview image { width: 87%; position: absolute; top: 8%; left: 6%; z-index: 3; border-radius: 19rpx; } #preview .hide1 image { width: 10%; height: 6%; position: absolute; right: 0; left: 84%; } #preview text { position: absolute; bottom: 170rpx; left: 25%; z-index: 5; font-size: 22rpx; color: gainsboro; } canvas { position: fixed; top: 0; left: 10000rpx; } wxml <canvas canvas-id="shareImg" style="width:545px;height:771px;"></canvas> <view hidden='{{hidden}}' id='preview' class="hide1{{show1?'':'show'}}"> <image src='{{prurl}}' mode='widthFix'></image> <button type='primary' size='mini' bindtap='save'>保存分享图</button> <text>保存后，可以从手机相册分享到朋友圈</text> <view class="hide1{{show1?'':'show'}}" bindtap='onTap'> <image src='../../images/Close.png'></image> </view> </view> js getData() { /*商品详情接口数据代码省略*/ //下载图片 var that = this; wx.downloadFile({ //需要小程序后台添加downloadFile域名 url: res.result.product.images[0].url, //接口返回数据 type: 'image', //类别 success: function (res) { var _avatarPath = res.tempFilePath const ctx = wx.createCanvasContext('shareImg'); var imgPath = _avatarPath //商品图 console.log(imgPath) var bgImgPath = '../../images/qrcode.jpg'; //二维码图 ctx.setFillStyle('white') ctx.fillRect(0, 0, 6000, 2800); ctx.drawImage(imgPath, 120, 30, 320, 320); ctx.drawImage(bgImgPath, 40, 500, 120, 110); ctx.setFontSize(22) ctx.beginPath("") var lineWidth = 0; var canvasWidth = 300; var initHeight = 380; var lastSubStrIndex = 0; ctx.setFillStyle('black') var str = that.data.product.title //商品价格名称 ctx.fillText('长按识别图中的小程序码', 190, 540) ctx.fillText('查看详情', 190, 580) //文字换行 这个地方有可能报错注释掉就可以 for (let i = 0; i < str.length; i ) { lineWidth = ctx.measureText(str[i]).width; if (lineWidth > canvasWidth) { ctx.fillText(str.substring(lastSubStrIndex, i), 18, initHeight); //绘制截取部分 initHeight = 34; //文字行高 lineWidth = 0; lastSubStrIndex = i; } if (i == str.length - 1) {//绘制剩余部分 ctx.fillText(str.substring(lastSubStrIndex, i 1), 18, initHeight); } } ctx.setFillStyle('red') ctx.fillText(that.data.product.price, 460, 380) //that.data.product.price 商品价格数据 ctx.setStrokeStyle('gainsboro') ctx.strokeRect(20, 450, 510, 0.1) ctx.stroke() ctx.draw() } }) }