置顶离屏canvas上drawImage的问题精选热门

2018-08-3014605浏览问题模块： Bug反馈

新手一枚，在学习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，请教下是我哪里写得不对吗？