キャンバスの背景

Question

をクリアしていないことは、非常に単純な問題のように思えるし、私はちょうど何かを見下ろすが、このコードでなければなりません。

window.onresize = function(){ 
    init.canvas.width = window.innerWidth; 
    init.canvas.height = window.innerHeight; 
} 
var init = { 
    canvas: new Object(), 
    ctx: new Object(), 
    constructCanvas: function(){ 
    this.canvas = document.getElementById("canvas"); 
    this.ctx = this.canvas.getContext("2d"); 
    this.canvas.width = window.innerWidth; 
    this.canvas.height = window.innerHeight; 
    } 
} 
init.constructCanvas(); 

var a = 20; 
var b = 20; 
init.ctx.lineWidth = 4; 
function loop(){ 
    init.ctx.fillStyle = "Blue"; 
    init.ctx.fillRect(0,0,init.canvas.width,init.canvas.height); 
    init.ctx.moveTo(a,b); 
    init.ctx.lineTo(a+=9,b); 
    init.ctx.stroke(); 
} 
setInterval(loop,100); 

起こっべきである何をするとき、次の私は、長さ9の小さな線分を取得していますコールが発生して、クリアする必要があり、別の線分を前の行の最後に置く必要がありますが、代わりに1つの長い行があり、fillRectの呼び出しが何もしないようです。

Answer 1

これはbeginPath()を使用しない場合に起こる多くのキャンバス問題の一つである：

キャンバスが適切にクリアされません。ただし、パスを決してクリアしないので、必要なセクションだけでなく、ライン全体を常に再描画します。 moveToとlineToを呼び出すことによって、既に作成されたパスに次のセクションを追加するだけです。strokeに描画されます。代わりに、新しいパスを開始する必要があります。

function loop(){ 
    init.ctx.fillStyle = "Blue"; 
    init.ctx.fillRect(0,0,init.canvas.width,init.canvas.height); 

    init.ctx.beginPath(): 
    init.ctx.moveTo(a,b); 
    init.ctx.lineTo(a+=9,b); 
    init.ctx.stroke(); 
}