离屏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,请教下是我哪里写得不对吗?