Как очистить дугу или круг в холсте HTML5?

Ответ 1

Нет, как только вы нарисовали что-то на холсте, нет объекта для очистки, а только пиксели, которые вы нарисовали. Метод clearRect не очищает ранее нарисованный объект, он просто очищает пиксели в пространстве, определяемом параметрами. Вы можете использовать метод clearRect для очистки дуги, если знаете прямоугольник, который содержит его. Это, конечно, очистит любые другие пиксели в области, поэтому вам придется их перерисовать.

Изменить: MooGoo дал гораздо лучший ответ ниже

Ответ 2

Нет clearArc, однако вы можете использовать Composite Operations для достижения того же *

context.globalCompositeOperation = 'destination-out'

В соответствии с MDC эффект этой настройки составляет

Существующий контент сохраняется там, где он не перекрывает новую форму.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing

Таким образом, любая заполненная форма с этим режимом закончится стиранием текущего содержимого холста.

Ответ 3

Вы можете использовать метод clearRect() для удаления части холста (включая вашу дугу), но когда вы используете clearRect() с дугами или чем-либо еще, что вы использовали beginPath() и closePath(), пока рисунок, вам также придется обрабатывать пути при стирании. В противном случае вы можете получить выцветшую версию вашей дуги.

//draw an arc (in this case, a circle)
context.moveTo(x, y);
context.beginPath();
context.arc(x,y,radius,0,Math.PI*2,false);
context.closePath();
context.strokeStyle = "#ccc";
context.stroke();

//now, erase the arc by clearing a rectangle that slightly larger than the arc
context.beginPath();
context.clearRect(x - radius - 1, y - radius - 1, radius * 2 + 2, radius * 2 + 2);
context.closePath();

Ответ 4

Это круговой эквивалент clearRect(). Главное - создать сложную операцию для ответа @moogoo.

var cutCircle = function(context, x, y, radius){
    context.globalCompositeOperation = 'destination-out'
    context.arc(x, y, radius, 0, Math.PI*2, true);
    context.fill();
}

См. https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html:

Ответ 5

Здесь обновленная скрипка для вас (использует clearRect): https://jsfiddle.net/x9ztn3vs/2/

Он имеет функцию clearApple:

block.prototype.clearApple = function() {
    ctx.beginPath();
    ctx.clearRect(this.x - 6, this.y - 6, 2 * Math.PI, 2 * Math.PI);
    ctx.closePath();
}