收藏
回答

canvas在编辑器里面正常显示 在真机出现问题

小程序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(); // 关闭绘图


回答关注问题邀请回答
收藏

2 个回答

登录 后发表内容