캔버스 자바 스크립트의 명확한 경로

Question

나는 약간의 캔버스 프로그래밍을 시험하고 있는데, 새로운 캔버스 프로그래밍을 할 때 이전 경로를 지우는 방법에 대한 질문이있다.

예 : 채워진 원을 획이없고 선이 그려집니다.

graphicContext.save(); 
graphicContext.beginPath(); 
graphicContext.arc(95,50,40,0,2*Math.PI); 
graphicContext.fillStyle="rgb(50, 200, 200)"; 
graphicContext.fill(); 
graphicContext.restore(); 

graphicContext.save(); 
graphicContext.moveTo(0,0); 
graphicContext.lineTo(200,100); 
graphicContext.stroke(); 
graphicContext.restore(); 

그러나, 원과 라인 모두 쓰다됩니다 나는 다음과 같은 코드가 있습니다. 원을 그리지 않고 어떻게 선을 칠할 수 있습니까?

Answer 1

우선, save 및 restore 방법을 사용할 필요가 없습니다.

두 번째로 새 경로를 만들 때 줄을 그리기 전에 beginPath 메서드를 사용하십시오. beginPath는 ... 이전 경로를 삭제/초기화됩니다

var graphicContext = document.querySelector('#canvas').getContext('2d') 
 

 
// circle 
 
graphicContext.beginPath(); 
 
graphicContext.arc(95,50,40,0,2*Math.PI); 
 
graphicContext.fillStyle="rgb(50, 200, 200)"; 
 
graphicContext.fill(); 
 

 
// line 
 
graphicContext.beginPath(); 
 
graphicContext.moveTo(0,0); 
 
graphicContext.lineTo(200,100); 
 
graphicContext.stroke();

<canvas id="canvas"></canvas>