Очищение холста дуги - PullRequest
Новая
       20

Очищение холста дуги

6 голосов
/ 30 мая 2011

Как мне перезаписать HTML5 дугу холста?Я предполагал, что этот код будет работать, но он оставляет границу вокруг него, несмотря на тот факт, что его в точности совпадают значения и просто другой цвет. Есть ли свойство border, которое я пропускаю ?? 

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
  <canvas id="surface" width="300" height="300"></canvas>

  <script type="text/javascript">
      var canvas = document.getElementById('surface');
      var ctx = canvas.getContext('2d');

      ctx.fillStyle = 'black';
      ctx.beginPath();
      ctx.arc(100, 100, 20, 0, Math.PI * 2, true);
      ctx.fill();

      ctx.fillStyle = 'white';
      ctx.beginPath();
      ctx.arc(100, 100, 20, 0, Math.PI * 2, true);
      ctx.fill();
  </script>
  </body>
</html>

Ответы [ 3 ]

2 голосов
/ 12 октября 2011

для этой ситуации имеет смысл просто перерисовать ту часть холста, которая содержала дугу.Вы можете очистить часть холста с помощью 

ctx.clearRect(x, y, width, height);

или для простоты вы можете просто очистить весь холст и полностью перерисовать его: 

ctx.clearRect(0, 0, canvas.width, canvas.height);
2 голосов
/ 30 мая 2011

Этот черный край является побочным эффектом сглаживания.

Самое простое решение - немного увеличить радиус дуги.

1 голос
/ 30 мая 2011

Если вы хотите что-то вроде функции отмены, вы можете скопировать данные изображения на холст подкачки до рисования дуги.Затем скопируйте данные изображения с холста подкачки на видимый, если требуется отмена.

...