模拟器可以正常画出，真机只能画出一部分……为什么是一部分？
模拟器：
真机：
createNewImg: function () { console.log(imgs) var that = this; var context = wx.createCanvasContext('mycanvas',this); context.setFillStyle("#ffe200") context.fillRect(0, 0, 375, 667) var gobg = imgs[0]; var touxiang = that.data.touxiang; var qrcode = imgs[1]; var name = that.data.name; var wenziBg = imgs[2]; var saomatishi = imgs[3]; //绘制二维码背景 context.rect(112.5, 350, 150, 150) context.clip(); context.drawImage(qrcode, 112.5, 350, 150, 150) context.drawImage(gobg, 0, 0, 375, 183); //绘制右下角扫码提示语 context.drawImage(saomatishi, 220, 500, 150, 180); //绘制左下角文字背景图 context.drawImage(wenziBg, 25, 560, 184, 82); context.setFontSize(12); context.setFillStyle('#333'); context.setTextAlign('left'); context.fillText("扫码进入小程序，朋友和你", 35, 580); context.stroke(); context.setFontSize(12); context.setFillStyle('#333'); context.setTextAlign('left'); context.fillText("各自获得1 0 0和50积分哦", 35, 605); context.stroke(); context.setFontSize(24); context.setFillStyle('#333333'); context.setTextAlign('center'); context.fillText(name, 187.5, 320); context.stroke(); context.setFontSize(14); context.setFillStyle('#333333'); context.setTextAlign('center'); context.fillText("邀请你一起加入小区", 187.5, 340); context.stroke(); context.setFontSize(14); context.setFillStyle('#fff'); context.setTextAlign('left'); context.fillText("扫码进入小程序", 245, 590); context.stroke(); //绘制头像 context.arc(187.5, 240, 40, 0, 2 * Math.PI,false) //画出圆 context.strokeStyle = "#ffe200"; context.clip(); //裁剪上面的圆形 context.drawImage(touxiang, 147.5, 200, 80, 80); // 在刚刚裁剪的园上画图 // context.setShadow(10, 50, 50, 'blue') // context.fillRect(10, 10, 150, 75) //最后画图 context.draw(); //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时 setTimeout(function () { wx.canvasToTempFilePath({ canvasId: 'mycanvas', success: function (res) { var tempFilePath = res.tempFilePath; that.setData({ imagePath: tempFilePath, canvasHidden: true }); }, fail: function (res) { console.log(res); } }); wx.hideToast() that.setData({ maskHidden: true }); }, 2000); }, |
二维码不要去扫，随便网上找的……贴出canvas主要代码，imgs图片数组我是用递归一张一张提前下载好的，大佬求解答
已解决。
varwenziBg = imgs[2];varsaomatishi = imgs[3];//绘制二维码背景// context.rect(112.5, 350, 150, 150)// context.clip();context.drawImage(qrcode, 112.5, 350, 150, 150)在绘制二维码时不要裁剪正方形再画二维码，注释掉如图中的两行，真机效果正常。原因暂时不明，懂的大佬解释一下，也为萌新提供一个思路，需要裁剪画图的时候最好把相关画图步骤放在最后，比如这里代码画圆形头像放在最后。
真机需要先下载图片再绘制，同时注意下download域名配置
别用模拟器。 模拟器有好多bug
可以看下这个组件写法
https://github.com/jasondu/wxa-plugin-canvas