Xóa các đường kẻ được vẽ trước đây trên canvas HTML5

Question

Để phát xung quanh với canvas HTML5, tôi quyết định tạo một ứng dụng vẽ một mặt đồng hồ tương tự. Mọi thứ đều tốt, ngoại trừ những dòng cũ không bị xóa theo cách mà tôi mong đợi. Tôi đã bao gồm một phần của mã dưới đây - DrawHands() được gọi một lần thứ hai:

var hoursPoint = new Object(); 
var minutesPoint = new Object(); 
var secondsPoint = new Object(); 

function drawHands() 
{ 
    var now = new Date(); 

    drawLine(centerX, centerY, secondsPoint.X, secondsPoint.Y, "white", 1); 
    var seconds = now.getSeconds(); 
    secondsPoint = getOtherEndOfLine(centerX, centerY, 2 * Math.PI/60 * seconds, 0.75 * radius); 
    drawLine(centerX, centerY, secondsPoint.X, secondsPoint.Y, "black", 1); 

    drawLine(centerX, centerY, minutesPoint.X, minutesPoint.Y, "white", 3); 
    var minutes = now.getMinutes(); 
    minutesPoint = getOtherEndOfLine(centerX, centerY, 2 * Math.PI/60 * minutes, 0.75 * radius); 
    drawLine(centerX, centerY, minutesPoint.X, minutesPoint.Y, "black", 3); 

    drawLine(centerX, centerY, hoursPoint.X, hoursPoint.Y, "white", 3); 
    var hours = now.getHours(); 
    if (hours >= 12) { hours -= 12; } // Hours are 0-11 
    hoursPoint = getOtherEndOfLine(centerX, centerY, (2 * Math.PI/12 * hours) + (2 * Math.PI/12/60 * minutes), 0.6 * radius); 
    drawLine(centerX, centerY, hoursPoint.X, hoursPoint.Y, "black", 3); 
} 

Để làm cho tinh thần của các bên trên, có hai chức năng helper:

• DrawLine (x1, y1 , x2, y2, màu sắc, độ dày)
• getOtherEndOfLine (x, y, góc, chiều dài)

vấn đề là trong khi tất cả các tay được rút ra như mong đợi trong màu đen, họ không bao giờ bị xóa. Tôi hy vọng rằng kể từ khi cùng một dòng được vẽ bằng màu trắng (màu nền) nó có hiệu quả sẽ xóa những gì đã được rút ra tại thời điểm đó. Nhưng điều này dường như không đúng.

Mọi thứ tôi bị thiếu?

Answer 1

Vì lý do mà tôi có thể mở rộng, bạn nên xem xét xóa khung hình và vẽ lại hoàn toàn trừ khi có lý do hiệu suất hoặc tổng hợp không.

Bạn muốn clearRect, một cái gì đó như thế này:

//clear the canvas so we can draw a fresh clock 
ctx.clearRect(0, 0, canvasWidth, canvasHeight); 

//redraw your clock here 
/* ... */ 

Answer 2

Lý do bạn không thể chỉ vẽ lại dòng trong trắng và hy vọng cho nó để xóa dòng cũ là bởi vì có thể có một số anti-aliasing/sự chảy máu. Bạn cũng sẽ nhận thấy rằng một đường thẳng nằm ngang được vẽ trên một pixel so với một nửa pixel trông rất khác nhau vì điều này.

Khi bạn thực hiện các dòng "xóa" màu trắng của mình, hãy thử vẽ chúng bằng một lớn hơn lineWidth khoảng 3 hoặc 4. Điều đó sẽ phù hợp với trường hợp của bạn.

Bạn cũng nên vẽ tất cả các vạch trắng trước, sau đó là tất cả các đường màu đen, trong trường hợp chúng giao nhau.

Answer 3

Một cách nhanh chóng và dễ dàng để xóa một canvas là để thiết lập chiều rộng:

context.canvas.width = context.canvas.width; 

Answer 4

Thay vì xóa những điều bạn không muốn bạn có thể lưu trạng thái của vải vào thời điểm đó trước khi bạn đã vẽ những thứ bạn không muốn và sau đó khôi phục lại khung thành trạng thái đó để 'xóa' chúng.

Điều này có thể được thực hiện khá dễ dàng sử dụng ImageData:

var canvas = document.querySelector('canvas'), 
 
    context = canvas.getContext('2d'); 
 

 
context.fillStyle = 'blue'; 
 
context.fillRect(0,0,10,10); 
 

 
// save the state of the canvas here 
 
var imageData = context.getImageData(0,0,canvas.width,canvas.height); 
 

 
// draw a red rectangle that we'll get rid of in a second 
 
context.strokeStyle = 'red'; 
 
context.strokeRect(70,70,20,20); 
 

 
setTimeout(function() { 
 
    // return the canvas to the state right after we drew the blue rect 
 
    context.putImageData(imageData, 0, 0); 
 
}, 1000);

<canvas width=100 height=100>