Question

我遇到了一个无法找到解决方案的问题。我有一个想要在画布上多次绘制的图像。为此，我想在每个地方绘制一个数组。

但是，当JavaScript应该绘制图像时，某些东西会使旧图像消失？为什么呢？

以下是制造麻烦的代码：

function drawPoints() {
var map = getMapArray();
var counter = 0;
for(var i = 1; i <= map.length; i++) {
    for(var j = 1; j <= entry.length; j++) { 
        counter++;
        for(var q = 0; q < points.length; q++) {
            if(counter == points[q] && points[q] != 0) {
                var point = new Image();
                point.src="./img/point.png";
                point.addEventListener("load", function(){canvas.drawImage(point, (j-1)*40, (i-1)*40)}, false);
            }
        }
    }
}
}

逻辑运作完美，并且它应该循环通过它。它是eventlistener中的drawimage函数，它不像我希望的那样打印图像。我不知道怎么办呢？

如果你们有一个更好的解决方案，那就不要一直打电话给eventlistener，请分享你的知识。谢谢你的建议。

不过，正如我之前所说的那样：该功能运行良好，但一切都只是白色，可能是因为它删除了旧图像，间隔时间太短，我看不到任何动作。

链接到实时脚本： http://picturds.com/pacman_serious/

Answer 1

您可能希望：

而不是每次画画时都会聆听图像

将图像存储在三个全局变量中（pacman，ghost，point）
从加载阶段开始，加载所有图像
加载图像后，启动游戏计时器
在游戏循环中，使用canvas.drawImage()

无法在画布上绘制同一图像的多个副本？

1 个答案: