Làm cách nào để xóa vòng cung hoặc vòng tròn trong canvas HTML5?

Question

Tôi thấy rằng có một phương pháp clearRect(), nhưng không thể tìm thấy bất kỳ để xóa một vòng cung (hoặc một vòng tròn đầy đủ).

Có cách nào để xóa vòng cung trong canvas không?

Answer 1

Không, khi bạn vẽ một thứ gì đó trên canvas, không có đối tượng nào để xóa, chỉ là các pixel bạn đã vẽ. Phương thức clearRect không xóa đối tượng đã vẽ trước đó, nó chỉ xóa các pixel trong không gian được xác định bởi các tham số. Bạn có thể sử dụng phương pháp clearRect để xóa vòng cung nếu bạn biết một hình chữ nhật có chứa nó. Điều này sẽ tất nhiên rõ ràng bất kỳ điểm ảnh khác trong khu vực, vì vậy bạn sẽ phải vẽ lại chúng.

Edit: MooGoo has given a much better answer below

Answer 2

Không có clearArc tuy nhiên bạn có thể sử dụng composite Operations để đạt được điều tương

context.globalCompositeOperation = 'destination-out' 

Theo MDC ảnh hưởng của thiết lập này là

Các hiện nội dung được giữ ở nơi nó không chồng lên hình dạng mới.

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

Vì vậy, bất kỳ hình dạng đầy với chế độ này trên sẽ kết thúc xóa nội dung canvas hiện hành.

Answer 3

Bạn có thể sử dụng phương thức clearRect() để xóa một phần của canvas (kể cả vòng cung), nhưng khi bạn đang sử dụng clearRect() với vòng cung hoặc bất kỳ thứ gì khác mà bạn đã sử dụng beginPath() và closePath() cho trong khi vẽ, bạn cũng sẽ cần xử lý các đường dẫn trong khi xóa. Nếu không, bạn có thể kết thúc với một phiên bản mờ của vòng cung của bạn vẫn xuất hiện.

//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's slightly larger than the arc 
context.beginPath(); 
context.clearRect(x - radius - 1, y - radius - 1, radius * 2 + 2, radius * 2 + 2); 
context.closePath(); 

Answer 4

Đây là hình tròn tương đương clearRect(). Điều chính là thiết lập một hoạt động tổng hợp cho mỗi câu trả lời của @ moogoo.

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

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

Answer 5

Dưới đây là một fiddle cập nhật cho bạn quá (sử dụng clearRect): https://jsfiddle.net/x9ztn3vs/2/

Nó có một chức năng clearApple:

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