HTML 5 캔버스에서 스트로크 색상 변경하기

시계의 종류 인 원을 그리려고 할 때 점 p1에서 시작하여 캔버스 2d 컨텍스트를 사용하여 검은 색 원호를 그립니다. 점 p1 (원 둘러보기) 나는 색을 흰색으로 변경하고 계속 그립니다. 검은 호가 지워지는 것과 같은 효과를 주어야합니다.하지만 예상대로 작동하지 않습니다. 왜냐하면 컨텍스트의 색을 변경하면 모든 것이 바뀌기 때문입니다 ...HTML 5 캔버스에서 스트로크 색상 변경하기

첫 번째 원을 색상으로 유지하고 전체 색상을 변경하지 않고 다른 색상으로 다른 원을 그릴 수있는 방법은 무엇입니까?

여기 내 시도

<!DOCTYPE html /> 
<html> 
<head> 
<title></title> 
<script type="text/javascript"> 
     var i = 0.01; 
     var Color = "Black"; 
     var x = 75;    // x coordinate 
     var y = 75;    // y coordinate 
     var radius = 20;     // Arc radius 
     var startAngle = 0;      // Starting point on circle 
     var anticlockwise = false; // clockwise or anticlockwise 

     function draw() { 
      var canvas = document.getElementById('canvas'); 
      var ctx = canvas.getContext('2d'); 

       ctx.beginPath(); 
       var endAngle = i; // End point on circleMath.PI + (Math.PI * 5)/

       if (Math.floor(endAngle) >= 6) { 
        i = 0.01; 
        if (Color == "Black") { 
         Color = "White"; 
        } else { 
         Color = "Black"; 
        } 
       } 

       ctx.strokeStyle = Color; 
       ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); 
       ctx.stroke(); 

       i = i + 0.05; 
       //document.getElementById('display').innerHTML = Math.floor(endAngle) + " " + Color; 
    } 

</script> 
</head> 
<body onload="window.setInterval(function(){draw()},100);"> 
<canvas id="canvas" width="150" height="150"></canvas> 
<span id="display"></span> 
</body> 
</html>

출처

2013-04-12 joe

당신은 당신의 각도와 약간의 문제가 발생합니다. 당신은 본질적으로 아크를 0에서부터 endAngle까지 언제든지 다시 그려 넣습니다. 그래서 endAngle이 6보다 큰 경우 끝에 흰색 원호를 사용하여 0-6에서 다시 그립니다.

i을 재설정하면 쉬운 수정으로 endAngle = 0.01을 설정하는 것입니다. 마지막 반복문이 끝날 때마다 각 반복마다 startAngle을 업데이트하여 항상 자체적으로 그려지지 않도록 할 수도 있습니다.

희망이 도움이됩니다. 음영의 답변을 사용

는

출처

2013-04-12 15:27:44 Shaded

@ Shaded 님이 제안한 startAngle 업데이트 제안을 사용하여 [fiddle] (http://jsfiddle.net/r8afe/)을 만들었습니다. 문제를 해결했지만 몇 가지 다른 점을 제시합니다. 즉, 반 시계 방향이 작동하지 않습니다 (endAngle 및 startAngle을 바꿔야 함). 더 밝은 색상은 어두운 색상을 덮어 쓰지 않지만, 그것. 또한 도면의 틈을 피하기 위해'Math.Floor = 6'에서 'ifAndAngle = 2 * Math.PI'의 경우보다 정확한 조건으로 변경했습니다. –

두 분 모두 감사합니다. 여기 업데이 트가 있지만 사실 스코트, 색상이 혼합되어 있습니다 :) http://jsfiddle.net/Wzt38/ – joe

Fyi, 블렌딩 문제가 아니라 안티 앨리어싱 문제입니다. 그래도 이상하게도 완벽하게 덮어 쓰지는 않습니다. –

, 다음을 수행 할 수 있습니다 :

if (Math.floor(endAngle) > 6.0) { 
    i = 0.01; 
    endAngle = i; 
    startAngle = 0; 
    if (Color == "Black") { 
     Color = "White"; 
     ctx.lineWidth = 4; 
    } else { 
     Color = "Black"; 
     ctx.lineWidth = 1; 
    } 
} 

ctx.strokeStyle = Color; 
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); 
ctx.stroke(); 

startAngle = endAngle - 0.1;

라인 폭이 같은 경우 뒤에 검은 색과 흰색의 뜻 앤티 앨리어싱, 당신은 가장자리의 계단 현상을 얻을 것이다 때문에 . 선 너비를 늘리면이 문제가 완화됩니다.

EDIT : Shaded의 의견에 따라 과도한 오버 페인팅을 제거하도록 업데이트되었습니다.

출처

2013-04-12 16:06:13 XGundam05

나는 이것을 시험해 보았는데, 여전히 검은 선이 계속 보이는 문제가 여전히 지속되는 것으로 보인다 : \ – Shaded

이상하게 여기에서 잘 작동하는 것 같다 [Fiddle] (http://jsfiddle.net/XGundam05/fHUKa/). 크롬을 사용하고 있습니다. – XGundam05

흠 ... 이상하다. 나도 크롬에있어 네 바이올린이 나에게도 효과가있어. 나는 그 차이를 발견 할 수 없다. – Shaded

HTML 5 캔버스에서 스트로크 색상 변경하기

답변

관련 문제