收藏
回答

真机调试时 fillRect绘制的图形 在 drawImage 后 不显示

框架类型 问题类型 操作系统 工具版本
小游戏 Bug Windows v1.02.1905151

- 当前 Bug 的表现(可附上截图)

单独 fillRect 会显示绿色方块,添加 drawImage 代码则绿色方块不显示

- 预期表现

预期是显示绿色方块Image。 模拟器上显示正常。

- 复现路径

单独 fillRect 会显示绿色方块,添加 drawImage 代码则绿色方块不显示

- 提供一个最简复现 Demo


机型:华为P8 MAX

微信版本号:7.04

系统版本号:v1.02.1905151

能复现问题的代码片段:



//import './js/libs/weapp-adapter'

//import './js/libs/symbol'


//import Main from './js/main'


//new Main()


const canvas = wx.createCanvas()

const context = canvas.getContext('2d') // 创建一个 2d context



context.fillStyle = '#1aad19' // 矩形颜色


function drawRect(x, y) {

  context.clearRect(x, y - 1, 100, 100)

  context.fillRect(x, y, 100, 100)

}

drawRect(canvas.width / 2 - 50, 0)


const image = wx.createImage()

const imgX = canvas.width / 2 - 50

let imgY = 500

image.onload = function () {

  context.drawImage(image, imgX, imgY)

}

image.src = 'images/hero.png'


补充两个问题(在更新后的代码片段中):

2,触发onTouchStart后,初始化时绘制的飞机图片也消失了

3,后绘制的image2被先绘制的image1遮盖,如果图片有叠加关系,该如何设置呢? 谢谢!


最后一次编辑于  2019-06-23
回答关注问题邀请回答
收藏

7 个回答

  • 小程序/小游戏开发-Link
    小程序/小游戏开发-Link
    2019-06-28

    如果是在 Android 下,需要每次清空画布。

    2019-06-28
    有用
    回复 2
    • 2019-06-29

      谢您的答复!

      drawImage前增加clearRect清空局部画布,已fillRect的区域依然不显示。



      - 当前 Bug 的表现(可附上截图)

      单独 fillRect 会显示绿色方块,添加 drawImage 代码则绿色方块不显示

      机型:华为P8 MAX

      微信版本号:7.04

      系统版本号:v1.02.1905151

      - 预期表现

      预期是显示绿色方块Image。 模拟器上显示正常。

      - 复现路径

      1,注释 game.js 中所有代码

      2, 添加代码片段

      const canvas = wx.createCanvas()

      const context = canvas.getContext('2d') // 创建一个 2d context



      context.fillStyle = '#1aad19' // 矩形颜色


      function drawRect(x, y) {

        context.clearRect(x, y, 100, 100)

        context.fillRect(x, y, 100, 100)

      }

      drawRect(canvas.width / 2 - 50, 0)


      const image = wx.createImage()

      const imgX = canvas.width / 2 - 50

      let imgY = 200

      image.onload = function () {

        context.clearRect(imgX, imgY, image.width, image.height)

        context.drawImage(image, imgX, imgY)

      }

      image.src = 'images/hero.png'



      3,fillRect 的绿色方块不显示


      2019-06-29
      回复
    • D.
      D.
      2019-08-05
      个人主体的账号能否发红包
      2019-08-05
      回复
  • 小游戏运营专员 - 宏
    小游戏运营专员 - 宏
    2019-06-21

    您好,请使用以下链接提供能复现问题的简单代码片段,方便技术人员为您解答,感谢配合(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2019-06-21
    有用
    回复 1
    • 2019-06-21

      您好,感谢您的回复! 代码片段链接已补充在提问中,请参考。

      2019-06-21
      回复
  • 空瓶子
    空瓶子
    2019-08-22

    你这样试一下看,可否显示正常:

    const canvas = wx.createCanvas()

    const context = canvas.getContext('2d'// 创建一个 2d context


    context.fillStyle = '#1aad19' // 矩形颜色

    context.fillRect(canvas.width / 2 - 500 100100)


    const image = wx.createImage()

    const imgX = canvas.width / 2 - 50;

    const imgY = 400;

    image.src = 'images/hero.png'

    context.drawImage(image, imgX, imgY)



    2019-08-22
    有用 1
    回复 1
    • 2019-08-23
      谢谢你的建议。我试了一下,还是不行。不用image.onload,image显示会有问题。用image.onload,fillRect就看不见。
      2019-08-23
      回复
  • 小开心
    小开心
    2020-03-23

    我也遇到,绘制的颜色块真机上面就是不显示,模拟器能显示,我的是华为nova5

    2020-03-23
    有用
    回复
  • 
    2020-03-02

    楼主解决了没?感觉这个canvas2d问题很多,但几个月了一直没人解决

    2020-03-02
    有用
    回复
  • 焦航
    焦航
    2019-08-23

    我也遇到了类似的问题,https://developers.weixin.qq.com/community/minigame/doc/000062d35f8bf885c8091fd6f5b400

    2019-08-23
    有用
    回复 1
    • 2019-08-25
      赞同。离屏绘制会增加开销,如果涉及多次异步加载则开销更大。等待官方回复或给出新方案。
      2019-08-25
      回复
  • 亮
    2019-08-13

    楼主解决了没有

    2019-08-13
    有用
    回复 1
    • 2019-08-13
      还是没解决
      2019-08-13
      回复
登录 后发表内容