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>jsgetData() {/*商品詳情接口數據代碼省略*///下載圖片var that = this;wx.downloadFile({ //需要小程序后臺添加downloadFile域名url: res.result.product.images[0].url, //接口返回數據type: 'image', //類別success: function (res) {var _avatarPath = res.tempFilePathconst 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()}}) }

轉載于:https://www.cnblogs.com/Zhangqwr/p/9044497.html

總結

以上是生活随笔為你收集整理的小程序canvasu真机上数据图片不能使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。