왜 내 캔버스가 올바르게 지워지지 않습니까?

Question

저는 현재 HTML5 Canvas로 약간의 실험 프로젝트를 진행하고 있습니다.

기본적으로, 나는 단지 캔버스를 예상대로 분명하게하려고합니다. 내 코드가 순간적으로 수행하는 유일한 작업은 중간에 끊어진 선을 생성하는 것입니다. 그러나, 현재 나는 한 줄을 만들고 그 줄을 제거하고 다른 줄에 첫 줄을 표시하지 않고 다른 줄을 추가하려고합니다.

이 코드가 작동 것이라고 생각합니다 : 모든 기술적으로

poles(20); // this number is the x position at which the line (pole) will be generated 
ctx.clearRect(0, 0, WIDTH, HEIGHT); 
poles(140) 

첫 번째 극이 생성 된 후 캔버스가 해제되어 있어야하기 때문에 이것은 단지 두 번째 극을 표시해야합니다. 하지만 여전히 두 가지 모두를 보여줍니다.

나는 단지 시도했을 때 :

poles(20); 
ctx.clearRect(0, 0, WIDTH, HEIGHT); 

캔버스는 삭제가 제대로 작동하는지 얘기하는 빈이었다.

내가 한 가지 더 노력이 경우

poles(20); 
ctx.clearRect(0, 0, WIDTH, HEIGHT); 
setTimeout(function() { 
    poles(140) 
}, 1000); 

을 두 기둥은 표시하지만 않았다 poles 기능은 모두도 기능이지만 다시 생성 될 일으키는 것을 얘기하는 없습니다 때까지 후 일초

function poles(x) { 
    var bottomH = getRandomInt(20, 180) 
    // using seperate rectangles will make a break 
    rect(40, 220 - bottomH, x, 0); // first section of line 
    rect(40, bottomH, x, HEIGHT - bottomH); // second section of line   
} 

나는 누군가가 내 poles 기능은 극의 모두가 다시 발생할 것입니다 와서 얼마나 나에게 설명 할 수 있기를 바랍니다 : 루프하지 않습니다.

예 here을 볼 수 있습니다. 는 참고로, 주요 코드는 다음과 같습니다 문제는 당신 rect 기능이있다

var canvas = document.getElementById("canvas"), 
    WIDTH = canvas.width, 
    HEIGHT = canvas.height; 
var ctx = canvas.getContext("2d"); 

function getRandomInt(min, max) { 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
} 

function rect(w, h, x, y) { 
    ctx.rect(x, y, w, h); 
    ctx.fill(); 
} 

function poles(x) { 
    var bottomH = getRandomInt(20, 180); // determine where the line break will be 
    rect(40, 220 - bottomH, x, 0); 
    rect(40, bottomH, x, HEIGHT - bottomH); 
} 

poles(20); 
ctx.clearRect(0, 0, WIDTH, HEIGHT); 
setTimeout(function() { 
    poles(140) 
}, 1000); 

Answer 1

. 특히 ctx의 구성원 인 .rect()의 사용으로 rect 멤버가 경로를 작성한 다음 ctx.fill()으로 채우십시오. 문제는 경로를 닫지 않아 열린 상태로 유지되고 두 번째 폴 호출이 발생할 때 추가됩니다.

rect 함수를 종료하기 전에 경로를 닫거나 ctx.fillRect을 사용하여 단일 호출로 사각형을 정의하고 채우는 방법으로 경로를 피할 수 있습니다.

다음의 변화는 예상대로 코드 기능을한다 :

function rect(w, h, x, y) 
{ 
// ctx.rect(x, y, w, h); 
// ctx.fill(); 
    ctx.fillRect(x,y,w,h); 
}