小游戏canvas问题
发布于 5 年前 作者 qdai 11971 次浏览 来自 问答
//绘制二维码
      this.userImage = wx.createImage();//创建图片对象
      this.shareBtn.onTap((res)=>{
//-------------------------------------------------------------------------------
        this.ctx.save();//保存canvas上下文,因为canvas设置之后会影响到之后所有的图片裁剪
        this.ctx.beginPath();//开始绘制
        this.ctx.arc(this.datastore.canvas.width / 2, this.datastore.canvas.height / 4, this.datastore.canvas.width / 10, 0, 2 * Math.PI);
        this.ctx.closePath();//结束绘制
        this.ctx.clip();//执行裁剪
//--------------------------------------------------------------------------------
        this.userName = res.userInfo.nickName;
        //在canvas上绘制用户头像
        this.userImage.src = res.userInfo.avatarUrl;
        this.isShare = true;//用户点击了确认
        this.userImage.onload = () => {
          this.ctx.drawImage(this.userImage,0,0,
            this.userImage.width, this.userImage.height,
          this.datastore.canvas.width * 2 / 5,
          (this.datastore.canvas.height / 4 - this.datastore.canvas.width / 10),                           this.datastore.canvas.width / 5,
          this.datastore.canvas.width / 5);//绘制图片
          this.ctx.restore();
          //绘制二维码
          const sanya_img = this.datastore.res.get('sanya');
          this.ctx.drawImage(
            sanya_img,//获取图片对象
            0, 0,
            sanya_img.width,
            sanya_img.height,
            this.datastore.canvas.width - sanya_img.width,
            this.datastore.canvas.height - sanya_img.height,
            sanya_img.width,
            sanya_img.height
          );
        }
        //隐藏“分享”按钮
        if (this.isShare) {
          this.shareBtn.hide();
        }
        else {
          this.shareBtn.show();
        }
      });

以上代码逻辑:

  1. 绘制背景图片(正常显示)

  2. 点击获取用户信息绘制圆形图片——显示头像(正常显示),但是无法显示背景图片了。

PS:在微信开发者工具上能正常显示背景图片和头像,但是在真机上只能显示头像

请问下这是什么原因????

以下是开发工具与真机效果对比

2 回复

大神解决了吗 也遇到了开发者工具上显示图片真机不显示 我用的是IOS调试的

你这个有点击小程序码,弹出扫描小程序码的菜单吗

回到顶部