Zmiana koloru obrysu w płótnie HTML 5

Próbuję narysować okrąg, rodzaj zegara, zacznę od punktu p1 i narysuj łuk w czerni, używając kontekstu 2d płótna, kiedy dotrę do punktu p1 (pełne koło tour) Zmieniam kolor na biały i kontynuuję rysowanie, który powinien nadać mu efekt, jak gdyby czarny łuk został usunięty, ale to nie działa zgodnie z oczekiwaniami, ponieważ kiedy zmieniam kolor tła, wszystko się zmienia ...Zmiana koloru obrysu w płótnie HTML 5

jak zachować pierwsze koło, w kolorze, i narysować inne na wierzchu w innym kolorze, bez zmiany koloru w całej scenie?

oto moja próba

<!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>

Źródło

2013-04-12 joe

masz trochę problemów ze swoimi kątami. Zasadniczo odrysujesz łuk od 0 do endAngle za każdym razem. Więc na końcu, gdy endAngle jest większa niż 6, przerysujesz od 0 do 6 z białym łukiem.

Łatwą poprawką jest ustawienie tylko endAngle = 0.01 po zresetowaniu i. Możesz również zaktualizować swój startAngle w każdej iteracji, aby był końcem ostatniego łuku, tak aby nie przeciągał się przez cały czas.

Mam nadzieję, że to pomoże!

Źródło

2013-04-12 15:27:44 Shaded

Zrobiłem [skrzypce] (http://jsfiddle.net/r8afe/), aby grać z tym, korzystając z sugestii @ Shaded o aktualizacji startAngle. Naprawia twój problem, ale przedstawia kilka innych, a mianowicie: przeciwnie do wskazówek nie działa z tym (musielibyśmy wymienić endAngle i startAngle), i wydaje się, że jaśniejszy kolor nie nadpisuje ciemniejszego, ale miesza się z to. Zmieniłem również twój stan z 'Math.Floor = 6' na bardziej dokładne' if endAngle> = 2 * Math.PI', aby uniknąć luki na rysunku. –

dzięki wam. tutaj jest aktualizacja, ale tak, to prawda, Scott, kolory są mieszane :) http://jsfiddle.net/Wzt38/ – joe

Fyi, to nie jest mieszanie, ale antyaliasing. Wciąż dziwne, że to nie jest idealnie nadpisane. –

Korzystanie odpowiedź zacienione za, można wykonać następujące czynności:

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;

Ponieważ bieli wygładzania z czarnym spodem, dostaniesz schodków na brzegach jeśli szerokości linii są takie same . Zwiększenie szerokości linii zmniejsza ten problem.

EDYCJA: Zaktualizowana w celu usunięcia nadmiernego malowania zgodnie z komentarzami Shaded.

Źródło

2013-04-12 16:06:13 XGundam05

Próbowałem tego, wydaje się, że problem nadal występuje z czarną linią wciąż widoczną: \ – Shaded

Dziwne, Wydaje się, że działa dobrze tutaj [Fiddle] (http://jsfiddle.net/XGundam05/fHUKa/). Używam Chrome. – XGundam05

Hmm ... to dziwne, że jestem też w Chrome i twoje skrzypce też działają dla mnie ... Nie widzę różnicy! – Shaded

Zmiana koloru obrysu w płótnie HTML 5

Odpowiedz

Powiązane problemy