收藏
回答

canvas的模拟器与真机不一致问题?

模拟器可以正常画出,真机只能画出一部分……为什么是一部分?

模拟器:

真机:

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图片数组我是用递归一张一张提前下载好的,大佬求解答

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

4 个回答

  • 圣战部队
    圣战部队
    09-19

    已解决。

    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)

    在绘制二维码时不要裁剪正方形再画二维码,注释掉如图中的两行,真机效果正常。原因暂时不明,懂的大佬解释一下,也为萌新提供一个思路,需要裁剪画图的时候最好把相关画图步骤放在最后,比如这里代码画圆形头像放在最后。

    09-19
    赞同 1
    回复
  • 微盟
    微盟
    09-19

    真机需要先下载图片再绘制,同时注意下download域名配置

    09-19
    赞同 1
    回复 3
    • 圣战部队
      圣战部队
      09-19
      可是我已经提前下载好了图片,域名配置过了,因为一共四张图,二维码那张图可以画出来,其他的都不行,我发现二维码是canvas内第一个画的内容,之后的文字和图片都没有显示,是不是我画布的写法有问题
      09-19
      回复
    • 微盟
      微盟
      09-19回复圣战部队
      貌似clip多次使用有bug,而且你第一个clip的用处不大吧?
      09-19
      回复
    • 微盟
      微盟
      09-19回复圣战部队
      多次clip、然后restore真机上会有bug,而且你使用也有点问题,clip之后也没restore
      09-19
      回复
  • 发飙的蜗牛
    发飙的蜗牛
    09-19

    别用模拟器。 模拟器有好多bug

    09-19
    赞同
    回复
  • 陈锐
    陈锐
    09-19

    可以看下这个组件写法

    https://github.com/jasondu/wxa-plugin-canvas

    09-19
    赞同
    回复
问题标签