收藏
回答

离屏canvas上drawImage的问题

新手一枚,在学习canvas时碰到以下疑问,根据开发文档自己写demo的时候,在离屏canvas上画了一个红色的矩形,然后在上屏canvas上画一个黄色的矩形,然后把离屏canvas绘制到上屏canvas上,代码如下

var screenCanvas = wx.createCanvas()
var offScreenCanvas = wx.createCanvas()
var offContext = offScreenCanvas.getContext('2d')
offContext.fillStyle = 'red'
offContext.fillRect(0, 0, 100, 100)
var screenContext = screenCanvas.getContext('2d')
 screenContext.fillStyle = 'yellow'
 screenContext.fillRect(50,50,100,100)
screenContext.drawImage(offScreenCanvas, 0, 0)

保存以后,模拟器确实得到了预期的结果



然后我想把矩形换成图片,代码修改如下:

var screenCanvas = wx.createCanvas()
var offScreenCanvas = wx.createCanvas()
var offContext = offScreenCanvas.getContext('2d')
var offImg = wx.createImage()
offImg.onload = function(){
  offContext.drawImage(offImg,0, 0)
}
offImg.src = 'images/enemy.png'
var screenContext = screenCanvas.getContext('2d')
 var screenImg = wx.createImage()
 screenImg.onload = function(){
   screenContext.drawImage(screenImg,50, 50)
 }
 screenImg.src = 'images/hero.png'
screenContext.drawImage(offScreenCanvas, 0, 0)

可是结果只画了上屏的图片,即hero.png,而没有画出离屏的图片,即enemy.png,请教下是我哪里写得不对吗?


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

3 个回答

  • 张飞
    张飞
    01-18

    一样的问题,想用离屏解决一些绘制,但是我发现wx.createCanvas竟然没有这个借口,请问楼主如何实现的?

    01-18
    赞同
    回复
  • 小甄
    小甄
    06-15

    下面的那些代码放在onload里面

    06-15
    赞同
    回复
  • KAMI
    KAMI
    07-22

    解决了吗 我也遇到这问题了

    07-22
    赞同
    回复