小游戏canvas画不出图片
发布于 5 年前 作者 jie20 1985 次浏览 来自 问答

下面的代码在开发者工具和安卓手机上能画出个绿方块, 画不出图片, 在ios上方块和图片都画不出来

图片在 项目根目录/images 下  是有的,  在开发者工具里面network里是加载了图片的

console出来canvas是有的, ctx也有, img也加载上了

const canvas = wx.createCanvas()

    , ctx = canvas.getContext("2d")
, img = wx.createImage()

    , {screenWidth, screenHeight} = wx.getSystemInfoSync();


img.src = "images/background.png";
img.width = screenWidth;
img.height = screenHeight;


ctx.drawImage(img, 0, 0, screenWidth, screenHeight);


console.log(canvas, ctx, img);


ctx.fillStyle = "#00ff00";

ctx.fillRect(0, 0, 200, 200);
6 回复

你要在onload回调函数里画

我也碰到了同样的问题,请问楼主解决了吗?

整个项目除了图片目录和图片文件外就一个game.js和一个game.json, game.js里面就这么多代码, 没有其他任何代码, 可以确定就执行了一次wx.createCanvas()

新建完canvas以后延迟几百毫秒再画就能出来了, 不知道是wx.createCanvas()创建出来的canvas还没有初始化完成还是啥回事

wx.createCanvas() 是不是在之前已经执行过了,如果是的话,这个canvas是离屏的。

然后这里得到的 screenWidth, screenHeight 你输出一下看看是不是0或者NaN,

你可以直接使用canvas的宽高。

回到顶部