Làm cách nào để thu nhỏ, ẩn, xóa hoặc xóa hình ảnh khỏi canvas html?

Question

this.context.drawImage(myimage, 0, 0); 

Đặt hình ảnh trên canvas được che phủ hoàn toàn trên web. Nhưng làm thế nào để loại bỏ nó sau khi nó ở đó?

Answer 1

Tùy chọn 1:
Vẽ hình chữ nhật trên cùng một màu với nền.

Tùy chọn 2 (hoạt động cho nền không tầm thường, nhưng chậm hơn):
Get the pixel data từ canvas trước khi vẽ hình ảnh, sau đó vẽ lại dữ liệu pixel đó để xóa hình ảnh.

Answer 2

Canvas là bề mặt vẽ ngay lập tức. Điều này có nghĩa rằng bạn thực hiện một lệnh trên nó (drawImage hoặc fillRect) và nó thực hiện lệnh đó, và nó không cung cấp cho một damn những gì vừa thực hiện. Không có sự hoàn tác của một cái gì đó.

Bạn đã gặp khó khăn khi tìm kiếm nó vì không có thứ gì như "xóa" cho Canvas. Tất cả nó biết là nó có một số điểm ảnh của một số màu sắc từ một nơi nào đó. Nó không có ý tưởng ở đâu.

Để đơn giản hóa một chút, nói chung có hai cách:

1. Xóa toàn bộ vải, và vẽ tất cả mọi thứ trên một lần nữa TRỪ một trong những hình ảnh mà bạn không muốn rút ra
2. Sử dụng hai bức tranh sơn dầu, một trong những chỉ có hình ảnh và một với tất cả các thứ khác. Xóa canvas này với clearRect (0,0, chiều rộng, chiều cao) và bạn đã hoàn tất.

Bạn sẽ nhận thấy trong 1. có thể bạn sẽ phải bắt đầu theo dõi những thứ bạn vẽ trên canvas nếu bạn muốn một số người trong số họ xóa hoặc định vị lại có chọn lọc. Sự bền vững đối tượng sắp xếp, hoặc thay vì chuyển canvas từ một bề mặt vẽ ngay lập tức sang một bề mặt vẽ được giữ lại, là thứ mà rất nhiều thư viện canvas thực hiện. Nếu bạn muốn tự mình làm, tôi đã viết một số tutorails để giúp mọi người bắt đầu.

Nếu bạn muốn xem thư viện, hãy xem easel.js. Nó khá dễ hiểu.

Answer 3

Vì vậy, tôi đã tìm ra cách nhanh chóng và dễ dàng để xóa canvas của mình. Tôi chỉ cần đặt các thẻ <canvas> của mình ở giữa các thẻ <p> với một Id, sau đó mỗi lần tôi cần xóa canvas của mình, tôi chỉ hiển thị lại các thẻ <p> của mình bằng cách thay đổi innerHTML, hoạt động như một nét duyên dáng.