HTML5 캔버스 호에서 윤곽선을 제거 할 수 없습니다.

Question

HTML5 Canvas Arc 's를 사용하여 일종의 진행 막대를 만들려고합니다.

내가 겪고있는 문제는 내 호의 주위에 어두운 윤곽이있어서 그 색을 바꿀 수 없다는 것입니다. 아래는 내가 의미하는 것을 보여주는 그림입니다.

내가 사용하고 코드는 다음과 같습니다.

function drawArmor(percent) { 
    var canvas = document.getElementById('ArmorCanvas'); 
    var context = canvas.getContext('2d'); 
    var radius = 36; 
    var startAngle = (3 * Math.PI)/2; 
    var percentLeft = 1; 
    var endAngle = -(Math.PI/2) + (Math.PI * 2) * (1 - percent); 

    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.lineWidth = 1; 
    context.lineCap = 1; 
    context.strokeStyle = '#FFF'; 
    context.arc(100, 100, radius, startAngle, endAngle, true); 
    context.stroke(); 
} 

function drawHealth(percent) { 
    var HealthText = document.getElementById("HealthText"); 
    HealthText.innerHTML = (percent * 100) + "%"; 

    var canvas = document.getElementById('HealthCanvas'); 
    var context = canvas.getContext('2d'); 
    var radius = 26; 
    var startAngle = (3 * Math.PI)/2; 
    var endAngle = -(Math.PI/2) + (Math.PI * 2) * (1 - percent); 

    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.lineWidth = 1; 
    context.lineCap = 1; 
    context.strokeStyle = '#00FE67'; 
    context.arc(100, 100, radius, startAngle - 0.00001, endAngle + 0.00001, true); 
    context.stroke(); 
} 

감사합니다.

Answer 1

당신이 선물하는 코드는 당신이 선물하는 이미지를 그리지 않으므로 당신이 당신의 링 유물을 일으키는 다른 코드를 사용하고 있다고 가정합니다.

어쨌든!

beginPath를 사용하여 경로 명령을 시작하지 않는 것으로 나타났습니다 (context.arc는 경로 명령 임).

beginPath가 없으므로 각각의 새 context.stroke 명령으로 경로가 다시 그려집니다.

오버 드로우가 축적되면 사용자가 묘사하는 인공물이 생깁니다.

아티팩트는 스트로크에서 반복적으로 앤티 앨리어싱이 초과되어 발생했을 수 있습니다.

그래서 ...

은 context.arc 명령 전에 context.beginPath을 넣고 유물이 사라 수 있습니다.

아티팩트가 사라지지 않으면 실제 코드를 확인해야합니다.