小游戏canvas问题
//绘制二维码 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(); } }); |
以上代码逻辑:
绘制背景图片(正常显示)
点击获取用户信息绘制圆形图片——显示头像(正常显示),但是无法显示背景图片了。
PS:在微信开发者工具上能正常显示背景图片和头像,但是在真机上只能显示头像
请问下这是什么原因????
以下是开发工具与真机效果对比