HTML5 Canvas clearRect無法正常工作

Question

所以我試圖讓屏幕上出現一個'X'，並且每隔一秒就會遍歷，但是當我繪製新的X時， X的路徑留在後面，我希望它只是一個以60px爲增量移動的路徑。顯然，必須是具有做路徑和這樣的，我不知道，這是我的代碼的東西：

//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.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);

<canvas id="myCanvas" width="200" height="100"></canvas>

Answer 1

你忘了開始和關閉路徑。你的畫布會清除，但是每一次迭代都會重新渲染。

//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); 

Answer 2

試試這個：

//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(); 
 
    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);

<canvas id="myCanvas" width="200" height="100"></canvas>