收藏
回答

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


最后一次编辑于  2018-12-20  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

2 个回答

  • 是柿子啊
    是柿子啊
    2018-12-20

    提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-12-20
    赞同
    回复 7
    • 何小强
      何小强
      2018-12-20

      https://developers.weixin.qq.com/s/nvWQuNmR7G4S

      2018-12-20
      回复
    • 是柿子啊
      是柿子啊
      2018-12-21回复何小强

      你是新版本的工具?

      2018-12-21
      回复
    • 何小强
      何小强
      2018-12-21

      是的

      2018-12-21
      回复
    • 何小强
      何小强
      2018-12-21

      我把wxml文件和js文件复制粘贴到这里   你看一下吧   代码也没多少 就是一个canvas方法

      2018-12-21
      回复
    • 是柿子啊
      是柿子啊
      2018-12-21回复何小强

      蒙层后面的也是图片?

      2018-12-21
      回复
    查看更多(2)
  • 郭玉峰
    郭玉峰
    01-02

    我这也出现了 偶尔出现

    01-02
    赞同
    回复