캔버스 배경

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의 작은 선 세그먼트를 얻을 수있다 다음을 콜백이 발생하여 하나를 지워야하고 다른 라인 세그먼트가 이전 라인의 끝 부분에 배치되어야하지만, 대신에 하나의 긴 라인이 생기고 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(); 
}