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

我创建了一个脚本来移动一个矩形，但当它移动时，它不会从画布中删除之前的矩形

这是我的javascript

const canvas=document.querySelector（'canvas'）；
const ctx=canvas.getContext（'2d'）；
常数框=25；
让snake=[]；
snake[0]={x:5*box，y:4*box}
函数绘图（）{
ctx.rect（snake[0].x，snake[0].y，box，box）；
ctx.fillStroke=“黑色”；
strokeRect（snake[0].x，snake[0].y，box，box）；
snake.pop（）；
snake.unshift（{x:6*box，y:4*box}）；
}
让游戏=设定间隔（平局，100）

---

您可以在每次

draw

函数调用开始时在画布对象上发布

ctx.clearRect

，这将为您完成此操作

const canvas=document.getElementById（'canvas'）；
const ctx=canvas.getContext（'2d'）；
常数框=25；
让snake=[]；
蛇[0]={
x:5*盒，
y:4*box
}
函数绘图（）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.rect（snake[0].x，snake[0].y，box，box）；
ctx.fillStroke=“黑色”；
strokeRect（snake[0].x，snake[0].y，box，box）；
snake.pop（）；
蛇({
x:6*盒，
y:4*box
});
}
让游戏=设定间隔（平局，350）

---

您可以在每次

draw

函数调用开始时在画布对象上发布

ctx.clearRect

，这将为您完成此操作

const canvas=document.getElementById（'canvas'）；
const ctx=canvas.getContext（'2d'）；
常数框=25；
让snake=[]；
蛇[0]={
x:5*盒，
y:4*box
}
函数绘图（）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.rect（snake[0].x，snake[0].y，box，box）；
ctx.fillStroke=“黑色”；
strokeRect（snake[0].x，snake[0].y，box，box）；
snake.pop（）；
蛇({
x:6*盒，
y:4*box
});
}
让游戏=设定间隔（平局，350）

---

以下是使用画布创建动画的正确方法：

因此，您必须创建一个动画帧，画布可以在矩形每次移动时使用该动画帧重新绘制矩形

您的问题是，您正在自己绘制相同的画布，因此请使用

ctx.clearRect（0，0，cvs.width，cvs.height）

清除整个画布

还有请不要在画布绘制中使用间隔。仅使用“我的函数”中的动画帧。只需将它放在主绘图函数的末尾，它就会一直重复。

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

const cvs=document.querySelector（“.canvas”），
ctx=cvs.getContext（“2d”）；
设rectX=-30；
函数init（）{
ctx.width=300；
ctx.height=300；
ctx.clearRect（0，0，cvs.width，cvs.height）；
ctx.fillRect（rectX-25，cvs.height/2-25,50,50）；
rectX++；
如果（rectX>325）{
rectX=-25；
}
window.requestAnimationFrame（init）；
}
init（）
以下是使用画布创建动画的正确方法：

因此，您必须创建一个动画帧，画布可以在矩形每次移动时使用该动画帧重新绘制矩形

您的问题是，您正在自己绘制相同的画布，因此请使用
ctx.clearRect（0，0，cvs.width，cvs.height）
清除整个画布

还有请不要在画布绘制中使用间隔。仅使用“我的函数”中的动画帧。只需将它放在主绘图函数的末尾，它就会一直重复。

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


const cvs=document.querySelector（“.canvas”），
ctx=cvs.getContext（“2d”）；
设rectX=-30；
函数init（）{
ctx.width=300；
ctx.height=300；
ctx.clearRect（0，0，cvs.width，cvs.height）；
ctx.fillRect（rectX-25，cvs.height/2-25,50,50）；
rectX++；
如果（rectX>325）{
rectX=-25；
}
window.requestAnimationFrame（init）；
}
init（）
插入您的代码html和csspls@sergeykuznetsov我把它从帖子中删掉了，因为这个问题不需要它，他正在寻找一个解决画布拖尾的方法，这是一个javascript问题。如果你好奇的话，CSS是一个10px的边框，html是一个画布pls@sergeykuznetsov我把它从帖子中删掉了，因为这个问题不需要它，他正在寻找一个解决画布拖尾的方法，这是一个javascript问题。如果你好奇的话，CSS是10px的边框，html是画布。