HTML5 Xóa đối tượng được vẽ trước đó trong canvas

Question

Tôi có đối tượng đa giác (nói một ô tô) được vẽ bên trong canvas HTML5 với sự trợ giúp của phương thức moveTo và lineTo. Tôi muốn vẽ liên tục đối tượng đó ở các vị trí khác nhau trong canvas (mô phỏng một đối tượng chuyển động). Vấn đề của tôi là đối tượng được vẽ trước đó không bị xóa. Thay vào đó, nhiều hình ảnh được vẽ trên canvas. Làm cách nào để khắc phục sự cố này?

Answer 1

Canvases chỉ là mảng các pixel, họ không biết gì về các hình dạng bạn vừa vẽ.

Có các thủ thuật hoạt hình được sử dụng trên màn hình bitmap (ví dụ "xor drawing") có thể được sử dụng để xóa hình cũ trước khi bạn vẽ hình mới, nhưng trên các máy hiện đại, nó đơn giản hơn rất nhiều (và hoàn hảo) nhanh) để chỉ xóa canvas và bắt đầu lại cho mỗi khung hình.

Đưa ra nhận xét của bạn cho các câu trả lời khác, tôi khuyên bạn chỉ nên sử dụng hai Canvas - một cho nền tĩnh và một cho ô tô. Nếu hình nền tĩnh thì thậm chí có thể là phần tử <img> thay vì Canvas.

Nếu hình ảnh ô tô tĩnh, bạn cũng có thể vẽ một lần, sau đó sử dụng định vị CSS để đặt vị trí của nó tương ứng với nền cho mỗi khung hình.

Answer 2

Bạn phải xóa vải vào đầu mỗi vẽ khung

context.clearRect(0, 0, canvas.width, canvas.height);