收藏
回答

canvas.drawImage() 出错,画布被重复复制了

问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
API和组件 小游戏 Bug canvas.drawImage() 客户端 Android 6.6.6 0

就是把官方 demo 中的  game.js 内容替换成


var c = wx.createCanvas();
var ctx = c.getContext('2d');
var img = wx.createImage();
img.onload = function () {
  ctx.drawImage(this, 0, 0);
  ctx.fillStyle="#000";
  ctx.fillRect(100,100,100,100);
}
img.src = "images/bg.jpg";


在所有 Android 手机上变成了下图,看底部,很明显 canvas 被重复的赶脚



最后一次编辑于  2018-04-24  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

6 个回答

  • 娇华
    娇华
    2018-04-24

    麻烦给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),我们定位下问题

    2018-04-24
    赞同
    回复
  • 建国
    建国
    2018-04-24

    wechatide://minicode/16K7xUmI64YV


    代码片段地址为


    wechatide://minicode/16K7xUmI64YV


    另外我没法给你基准库的地址,因为 vConsole 里看不到

    2018-04-24
    赞同
    回复
  • 木头
    木头
    2018-04-24

    @小辣椒,请教下1.canvas画网络图片,模拟器可以,真机画不出来;2.canvas画出来后层级太高遮住页面了,不能调整;3.canvas画布如何销毁。谢谢

    2018-04-24
    赞同
    回复
  • 建国
    建国
    2018-04-25

    @木头  看这个帖子 ( https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html ) 分享你的代码,我帮你看看

    2018-04-25
    赞同
    回复
  • 建国
    建国
    2018-04-25

    @ 官方:小辣椒


    我后来又各种调试了下,如果图片沾满全屏幕,也就是使用



     ctx.drawImage(img,0,0,canvas.width,canvas.height);



    那么就不会出错,当然,这不是不会出错,而是最顶上的画布把其它画布都遮住了


    更坑的一点,就是在  img.onload()  不绘制图片,而是绘制其它的, 也会造成画布重复


    所以我还以为是 onload() 的


    后来发现这是想当然了


    不使用 onload() 而是使用延迟绘制



      setTimeout(function(){ctx.drawImage(img,10,10,300,300);},2000);



    图样图森破,还是会有刚刚的 bug.....


    我该怎么办?


    为了解决这个问题,我采用了什么办法?


    不是解决了问题,而是取巧,既然最顶上的画布会遮住其它的画布,那么很简单,就先绘制一个不透明的颜色,然后再绘制图片...



    2018-04-25
    赞同
    回复 1
    • 狮子王
      狮子王
      2018-06-01

      如果一开始就绘上去也没有问题,如果是后期重绘,就会出现这个BUG,必须把背景什么的都重新绘制一遍才行,腾讯技术真是坑爹。

      2018-06-01
      回复
  • 狮子王
    狮子王
    2018-06-01

    虽然没看到你图片,但我觉得我的BUG跟你一样,此问题只在客户端出现,在开发工具里正常,不知道正式环境会不会有如此奇葩的BUG.要解决这个问题,貌似只能重新把整个背景重新再渲染一遍。

    https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=000a024809c5185c76d674ce558c00&token=125418695&lang=zh_CN

    2018-06-01
    赞同
    回复