Изменение цвета штриха в HTML 5 Холст

Я пытаюсь нарисовать круг, вид часов, я начинаю в точке p1 и рисую дугу в черном, используя контекст canvas 2d, когда я достигаю точки p1 (полный круг tour) Я меняю цвет на белый и продолжаю рисовать, что должно дать ему эффект, как если бы черная дуга стиралась, однако это не работает так, как ожидалось, потому что, когда я меняю цвет контекста, все меняется ...Изменение цвета штриха в 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 с белой дугой.

Легкое исправление заключается в том, чтобы просто установить endAngle = 0.01 при сбросе i. Вы также можете обновить свой startAngle на каждой итерации до конца вашей последней дуги, чтобы она не рисовала все время.

Надеюсь, это поможет!

источник

2013-04-12 15:27:44 Shaded

Я сделал [скрипку] (http://jsfiddle.net/r8afe/), чтобы играть с этим, используя предложение @ Shaded по обновлению startAngle. Он исправляет вашу проблему, но представляет несколько других, а именно: anticlockwise не работает с этим (нам нужно будет заменить endAngle и startAngle), и кажется, что более светлый цвет не переписывает более темный, но смешивается с Это. Кроме того, я изменил ваше условие с 'Math.Floor = 6' на более точное' if endAngle> = 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/). Я использую Chrome. – XGundam05

Хм ... странно, я тоже на Chrome, и твоя скрипка тоже работает для меня ... Кажется, я не вижу разницы! – Shaded

Изменение цвета штриха в HTML 5 Холст

ответ

Смежные вопросы