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)

将清除整个画布。

在绘制函数中绘制每帧之前，请先进行以下设置。基本上，它先清除画布，绘制图片，然后不断重复以制作动画效果。

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

2 个答案: