我在画布上移动矩形时遇到问题

如何解决我在画布上移动矩形时遇到问题

我创建了一个脚本来移动矩形，但是随着矩形的移动，它不会从画布上删除前一个矩形。

这是我的JavaScript。

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const box =25;
let snake=[];
snake[0]={x:5*box,y:4*box}

function draw(){
    ctx.rect(snake[0].x,snake[0].y,box,box);

    ctx.fillStroke="black";

    ctx.strokeRect(snake[0].x,box);

    snake.pop();
    snake.unshift({x:6*box,y:4*box});
}

let game=setInterval(draw,100)

<canvas></canvas>

解决方法

您可以在每个ctx.clearRect函数调用开始时在画布对象上发布draw，这将为您完成

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const box = 25;
let snake = [];
snake[0] = {
  x: 5 * box,y: 4 * box
}

function draw() {

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

  ctx.rect(snake[0].x,snake[0].y,box,box);

  ctx.fillStroke = "black";


  ctx.strokeRect(snake[0].x,box);

  snake.pop();
  snake.unshift({
    x: 6 * box,y: 4 * box
  });


}

let game = setInterval(draw,350)

<canvas id=canvas></canvas>

,

此处提供了使用画布创建动画的正确方法：

因此，您必须创建一个动画帧，画布每次移动时都可用来重绘矩形。

您的问题是您在自己上面绘制了同一画布，因此请使用ctx.clearRect(0,cvs.width,cvs.height)来清除整个画布。

也...... 请不要在画布绘图中使用间隔。只能像在我的函数中那样使用动画帧。只需将其放置在主绘图功能的末尾，它就会永远重复下去。

向下滚动并单击“运行代码段”以查看我的示例在浏览器中运行。您会注意到，矩形将平滑移动，并且不会留下任何痕迹。

const cvs = document.querySelector(".canvas"),ctx = cvs.getContext("2d");

let rectX = -30;

function init() {
    ctx.width = 300;
    ctx.height = 300;
    ctx.clearRect(0,cvs.height);
    ctx.fillRect(rectX - 25,cvs.height / 2 - 25,50,50);
    rectX++;
    if (rectX > 325) {
        rectX = -25;
    }
    window.requestAnimationFrame(init);
}

init();

<canvas class="canvas" style="border:1px solid black"></canvas>