离屏canvas上drawImage的问题
发布于 6 年前 作者 wei99 5074 次浏览 来自 问答

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

3 回复

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

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

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

回到顶部