Javascript HTML、CSS、JS、画布矩形不删除

我希望矩形在画布上移动，而不是每次都复制。 它会绘制它，但矩形会停留在那里

我是画布的初学者，所以如果这是一个史诗般的失败，那就做好准备

密码笔在

var c=document.getElementByIdcanvas； var ctx=c.getContext2d； var WIDTH=canvas.WIDTH； var HEIGHT=canvas.HEIGHT； var-boxWidth=50； 高度=50； var bX=宽度/2-箱宽/2； var bY=高度/2-箱高/2； 函数渲染{ ctx.fillStyle=白色； ctx.rectbX、bY、箱宽、箱高； ctx.fill； } 功能控制{ bX++； } 主要功能{ 控制 提供 } 主要的 var run=setIntervalmain，10 帆布{ 宽度：400px； 高度：400px； 背景色：黑色； } div{ 文本对齐：居中； }

---

在每次绘制矩形之前，请重新绘制画布-仔细想想。这一切都是分层完成的

矩形保留在那里，因为您没有替换上次绘制的矩形

var c=document.getElementByIdcanvas； var ctx=c.getContext2d； var WIDTH=canvas.WIDTH； var HEIGHT=canvas.HEIGHT； var-boxWidth=50； 高度=50； var bX=宽度/2-箱宽/2； var bY=高度/2-箱高/2； 函数渲染{ ctx.clearRect0，0，ctx.canvas.width，ctx.canvas.height；//改用clear rect ctx.fillStyle=白色； ctx.fillRectbX，bY，boxWidth，boxHeight；//使用fillRect代替fill } 功能控制{ bX++； } 主要功能{ 控制 提供 requestAnimationFrame=>main； } 帆布{ 宽度：400px； 高度：400px； 背景色：黑色； } div{ 文本对齐：居中； }

---

您必须在每次迭代时重新绘制整个画布。这很有意义，但在codepen中它不起作用。@WLGBlog查看一下我的编辑-第一次清除时使用了错误的方法！它起作用了！有一个问题。白色框是50乘50，但它看起来像这样：:@WLGBlog在代码段中看起来很正常-这真的很奇怪。当我更改画布的宽度或高度时，框的宽度和高度比率会发生变化。