내 코드에서 HTML5 캔버스가 지워지지 않는 이유는 무엇입니까?

Question

저는 캔버스 프로그래밍을 시작하고 작은 게임을 만들려고합니다. 아래는 제가 시도하고있는 샘플 코드입니다. 내 의도는 다음과 같습니다.

1. 캔버스를 만듭니다.
2. 일부 배경색으로 채우십시오.
3. 원을 그립니다.
4. 캔버스를 지 웁니다.
5. 다른 위치에 다른 원을 그립니다.

여기에 코드입니다 :

var canvas = document.createElement('canvas'); 
 
canvas.width= 400; 
 
canvas.height = 400; 
 
document.body.appendChild(canvas); 
 

 
var ctx = canvas.getContext('2d'); 
 

 
// 2. Fill background 
 
ctx.fillStyle = 'rgb(30,0,0)'; 
 
ctx.fillRect(0,0,400,400); 
 

 
// 3. Draw circle 
 
ctx.save(); 
 
ctx.fillStyle = 'rgba(256,30,30,.8)'; 
 
ctx.arc(50,50, 20, 0, Math.PI*2, true); 
 
ctx.fill(); 
 
ctx.restore(); 
 

 
// 4. Clear Canvas 
 
ctx.save(); 
 
ctx.setTransform(1, 0, 0, 1, 0, 0); 
 
ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
ctx.restore(); 
 

 
// 5. Draw another circle 
 
ctx.save(); 
 
ctx.fillStyle = 'rgba(256,30,30,.8)'; 
 
ctx.arc(150,150, 20, 0, Math.PI*2, true); 
 
ctx.fill(); 
 
ctx.restore();

그러나 당신이 볼 수 있듯이, 단지 배경 색상은 삭제됩니다 및 그대로 첫 번째 원이 남아있다.

두 번째 원을 그리기 전에 위의 코드가 캔버스를 완전히 지우지 못하는 이유는 무엇입니까?

Answer 1

새 경로를 시작하기 전에 beginPath를 사용하지 않으면 모든 draw 명령이 현재 경로에 스태킹을 유지합니다.

두 번째로 채우기()하면 현재 경로에 첫 번째 원이 계속 표시되므로 화면에 증서가 지워진 경우에도이 단일 fill() 명령으로 그려진 두 개의 원이 있습니다. .

== >> 새 경로를 시작하기 전에 beginPath()를 사용하십시오.