"Xóa" trong html5 canvas

Question

Tôi có một ứng dụng vẽ nguệch ngoạc trong canvas html5, và tôi đang cố gắng tìm ra cách tốt nhất để thực hiện điều khiển tẩy. Xung đầu tiên là chỉ để có công cụ xóa màu nền [trắng], nhưng đây là vấn đề bởi vì nếu người dùng di chuyển một hình ảnh hoặc một lớp khác đến nơi họ đã xóa trước đó, họ sẽ thấy bản vẽ màu trắng nơi chúng bị xóa.

Lý tưởng nhất, tôi muốn có điều khiển xóa thay đổi pixel thành màu đen trong suốt. Tôi không thể chỉ đơn giản là sử dụng lineTo để làm điều này bởi vì, rõ ràng, nó chỉ vẽ một đường trong suốt màu đen trên nó, và để lại hình tượng trưng ban đầu không bị ảnh hưởng. Có ý tưởng nào để làm việc này không?

Cảm ơn.

Answer 1

Nếu bạn muốn vẽ một cơn đột quỵ đen trong suốt, có thể bạn muốn:

context.globalCompositeOperation = "destination-out"; 
context.strokeStyle = "rgba(0,0,0,1)"; 

Hãy nhớ để lưu các globalCompositeOperation trước và sau đó khôi phục lại nó sau hoặc minh bạch sẽ không hoạt động bình thường!

Answer 2

Nhìn vào clearRect nếu công cụ xóa của bạn là hình chữ nhật. Hàm clearRect, theo đặc tả, sẽ tạo các pixel trong hình chữ nhật trong suốt màu đen, như bạn muốn.

Nếu bạn muốn có các hình dạng tẩy khác [tức là: hình tròn?] Bạn phải thao tác dữ liệu pixel. Lưu ý rằng nếu bạn muốn một công cụ tẩy lông giống như lông, điều này sẽ trở thành địa ngục.

tài liệu tham khảo hữu ích nhất thế giới: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element

Answer 3

Lưu ý rằng firefox 3.6/4.0 triển khai 'sao chép' bằng cách xóa toàn bộ nền trước tiên. Các tài liệu w3c không rõ ràng về những gì sẽ xảy ra ở đây. Chrome (webkit?) Diễn giải thông số kỹ thuật là 'chỉ nơi các pixel thực sự được vẽ', ví dụ kết quả của cú đánh().

đích đến bằng "rgba (255,255,255,1,0)", đặt nền thành trong suốt, trong đó pixel trong bộ đệm khung không trong suốt. để lại nền trong suốt trong cả chrome và firefox.

sao chép trang sau tại địa phương và chơi với nhiều màu sắc/opacities khác nhau cho hộp màu xanh và hình tròn màu đỏ, và đừng quên làm cho màu nền của trang không phải màu trắng! và

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

Bạn sẽ thấy các trình duyệt khác hẳn.