clearRect không xóa canvas khi vẽ các đường thẳng đứng

Question

Tôi đã đánh một trường hợp cạnh kỳ lạ đang xây dựng thứ gì đó bằng canvas ở nơi làm việc. clearRect không xóa canvas khi vẽ các đường thẳng đứng từ trên xuống dưới cùng của canvas. Khi hiển thị các công cụ khác, clearRect hoạt động tốt.

Tôi không chắc chắn nếu tôi thiếu một cái gì đó hiển nhiên, nếu đây là hành vi có chủ ý, hoặc một lỗi trình duyệt (không vì hành vi là giống hệt nhau trong chrome, safari, firefox và opera trên mac). Nếu nó là hành vi có chủ ý, không ai biết lý do đằng sau nó và/hoặc có lẽ có thể trỏ đến một số tài liệu?

tôi đã thực hiện một trường hợp thử nghiệm nhỏ cho thấy hành vi rõ ràng, chỉ có sự kết hợp clearRect/đường dọc không rõ ràng vải: http://jsfiddle.net/kZj6F/

Cảm ơn!

Answer 1

Sự cố của bạn bị thiếu beginPath khiến các dòng tiếp theo được thêm vào cùng một đường dẫn là stroke vẽ tất cả các dòng.

Nếu bạn chuyển sang dấu chấm và quay lại dòng với tùy chọn clearRect, bạn có thể xem arc cuối cùng được thêm vào đường dẫn đang được vẽ. Chỉ cần thêm một cuộc gọi ctx.beginPath(); trước ctx.moveTo(randomX + 0.5, 0); ctx.lineTo(randomX + 0.5, canvas.height); và sự cố được giải quyết.

Bạn có thể kiểm tra http://jsfiddle.net/kZj6F/1/ để xem nó hoạt động.

Bwt nó sẽ có hình dạng khác quá nếu chúng đã được thêm vào đường dẫn và đường dẫn không bị xóa.