setInterval() 没有删除之前绘制的图像[重复]

Posted 2023-03-05

【中文标题】setInterval() 没有删除之前绘制的图像[重复]

【英文标题】：setInterval() is not deleting the previous drawn image [duplicate]

【发布时间】：2020-04-16 08:58:14

【问题描述】：

我一直在尝试开始使用 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

【问题讨论】：

为什么要删除之前的图片？在绘制下一个图像之前，您没有清除画布。

我刚刚假设在使用setInterval() 时它会处理方块移动的动画。我不想清除整个画布，因为稍后画布上还会有其他元素。

这能回答你的问题吗？ How to clear the canvas for redrawing

【参考方案1】：

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

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

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

将清除整个画布。

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

【参考方案2】：

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

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

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