Javascript HTML5画布clearRect不是'；行不通

所以我试着让一个“X”出现在屏幕上，每秒钟穿过一次，但是当我画新的“X”时，之前的“X”不会消失，整个“X”的路径都会留在后面，我希望它只是以60像素的增量移动。显然，一定有一些与路径有关的东西，我不知道，下面是我的代码：

//ctx已经被定义为画布上下文，可以正常工作
var bx=0；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
setInterval（函数（）{
clearRect（0,0，ctx.canvas.width，ctx.canvas.height）；
ctx.moveTo（bx*60,0）；
ctx.lineTo（bx*60+60,60）；
ctx.moveTo（bx*60+60,0）；
ctx.lineTo（bx*60,60）；
ctx.stroke（）；
bx++；
},1000);
您忘记开始和关闭路径。您的画布将被清除，但您的所有行将在每次迭代中重新渲染

//ctx is already defined as the canvas context and works fine
var bx = 0;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
setInterval(function(){
    ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height);
    ctx.beginPath(); // begin
    ctx.moveTo(bx*60   ,0);
    ctx.lineTo(bx*60+60,60);
    ctx.moveTo(bx*60+60,0);
    ctx.lineTo(bx*60   ,60);
    ctx.closePath(); // close
    ctx.stroke();
    bx++;
},1000);

试试这个：


//ctx已经被定义为画布上下文，可以正常工作
var bx=0；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
setInterval（函数（）{
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
ctx.beginPath（）；
ctx.moveTo（bx*60,0）；
ctx.lineTo（bx*60+60,60）；
ctx.moveTo（bx*60+60,0）；
ctx.lineTo（bx*60,60）；
ctx.closePath（）；
ctx.stroke（）；
bx++；
}, 1000);