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

你必须清除每个循环开始时的canvas:

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

这是因为您的对象在技术上并没有移动，它只是在不同的地方被重新绘制。我们擦掉前面的图，给人以动态运动的印象。这是一场闹剧！

Answer 2

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

ctx.clearRect(x, y, 宽度, 高度) 函数清除 canvas 上的一个矩形。例如：

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

将清除整个 canvas。

在绘制函数中绘制每一帧之前将其放入。基本上就是先清空canvas，画图，然后不断重复做动画效果。

setInterval() 不是删除之前绘制的图像

setInterval() is not deleting the previous drawn image

html

javascript

css

setinterval

requestanimationframe