setInterval（）不会删除先前绘制的图像

Question

我一直试图开始使用Javascript创建游戏，但是目前对于如何使动画制作成简单的图像感到困惑。我正在使用的图像是黑色正方形png，当我使用setInterval()时，它会复制图像并且不会将图像从其先前状态中移除。它在每个像素处绘制另一个图像，但不会消除最后一帧，因此它看起来像一个向上增长的黑色矩形。我希望块向上移动并删除最后绘制的帧。我在做什么错？

我的js代码：

var cvs = document.getElementById("game");
var ctx = cvs.getContext("2d");

var block = new Image();

block.src = "images/Solid_black.png";

var imgCount = 1;

var blockX = 10;
var blockY = 462;

var speed = 5;

window.onload = function() {
    setInterval(draw, 1);
}


function draw() {
    if (--imgCount > 0) { return; }

    console.log(cvs.clientWidth);
    ctx.drawImage(block, blockX, blockY, 50, 50);
    blockY--;
}
draw();

what it looks like

Answer 1

您必须在每个循环的开始时清除画布：

ctx.clearRect(0, 0, canvas.width, canvas.height);

这是因为您的对象从技术上讲并没有移动，只是在不同位置重绘了对象。我们擦拭先前的图形以给人以动态运动的印象。这是一场闹剧！

Answer 2

老实说，我不知道这是您要找的东西，但是：

ctx.clearRect（x，y，width，height）函数清除画布上的矩形。例如：

ctx.clearRect(0, 0, canvas.width, canvas.height) 

将清除整个画布。

在绘制每一帧之前先放置它。