微信小程序canvas绘图在编辑器上面没有问题，但是在真机预览就出现不显示的问题，请问大家有没有遇到这个问题？？？？



代码：
const ctx = wx.createCanvasContext('myCanvas', this.$scope);
ctx.beginPath();
//右底部透明背景
ctx.setFillStyle('white');
ctx.setGlobalAlpha(0)
ctx.fillRect(X*0.8,0, X*0.2, Y);
ctx.save();
//右侧透明半圆
ctx.setGlobalAlpha(1);
ctx.arc(X, 0.48*Y, 10, 0, 2 * Math.PI,true);
ctx.clip();
ctx.setFillStyle('white');
ctx.setGlobalAlpha(1);
ctx.fillRect(X*0.8,0, X*0.2, Y);
ctx.restore();
ctx.closePath();

ctx.beginPath();
//左底部透明背景
ctx.setFillStyle('white');
ctx.setGlobalAlpha(0)
ctx.fillRect(0,0, X*0.8, Y);
ctx.save();
//左侧透明半圆
ctx.setGlobalAlpha(1);
ctx.arc(0, 0.48*Y, 10, 0, 2 * Math.PI,true);
ctx.clip();
ctx.setFillStyle('white');
ctx.setGlobalAlpha(1)
ctx.fillRect(0,0, X*0.8, Y);
ctx.drawImage(ImageTep.tempFilePath,0,0,0.68*X,0.48*Y);
ctx.restore();
ctx.save();
ctx.closePath();

// 画白色矩形遮盖底部轮廓线
ctx.beginPath();
ctx.setFillStyle('white');
ctx.setGlobalAlpha(1)
ctx.fillRect(0.67*X,0, X*0.2, Y);
ctx.save();
// 画三角形遮盖图片
ctx.moveTo(0.67*X,0);
ctx.lineTo(0.68*X,0.48*Y);
ctx.lineTo(0.28*X,0.48*Y);
ctx.fill();
ctx.save();

// 信息
// 公司 职位
ctx.setFontSize(14)
ctx.setFillStyle('#888')
ctx.setTextAlign('left')
ctx.fillText('中国人保', 0.78*X,0.086*Y);
ctx.fillText('产品经理', 0.78*X,0.225*Y);
ctx.save();
// 名字
ctx.setFontSize(21)
ctx.setFillStyle('#262628')
ctx.setTextAlign('left')
ctx.fillText('张静', 0.58*X,0.23*Y);
ctx.save();

//底部二维码和文字
ctx.drawImage(ImageTep.tempFilePath,0.42*X,0.63*Y,0.15*X);
ctx.save();
//扫一扫文字
ctx.setFontSize(14)
ctx.setFillStyle('#333')
ctx.setTextAlign('left')
ctx.fillText('扫一扫', 0.435*X,0.8*Y);
ctx.setFontSize(13)
ctx.setFillStyle('#bbb')
ctx.setTextAlign('left')
ctx.fillText('了解我的更多', 0.37*X,0.86*Y);
ctx.fillText('信息', 0.4635*X,0.895*Y);
ctx.save();

ctx.draw(); // 关闭绘图

微信小程序开发问题解答

本文网址：http://www.91bianli.com/weixinxiaochengxu/43304.html