HTML5 Canvas: Cách giả mạo globalCompositeOperation = "darker"

Question

Tôi đã googled và googled về điều này, và tất cả những gì tôi có thể tìm thấy, kể cả trên StackOverflow, là "hỗ trợ và bị hỏng trong hầu hết các trình duyệt chính." Không phải là một giải pháp thực tế cho vấn đề của tôi.

Playboy của tháng này đi kèm với một cặp kính 3D (đỏ/lục lam) để xem trung tâm mắt-popping. Đương nhiên, tôi nhấn Internets để tìm tất cả các màu đỏ/cyan anaglyph mà tôi có thể và xem chúng tuyệt vời như thế nào. Cuối cùng tôi tìm thấy một số GIF động, dẫn đến ý tưởng rằng có lẽ tôi nên làm một số thứ HTML5 Canvas thú vị cho phép bạn đặt hình dạng trên một cảnh trong không gian 3D.

This is how far I got. Chỉ hoạt động tốt trong Google Chrome. Trong Firefox, "Văn bản nâng cao" sẽ trông chính xác, nhưng không phải là hình chữ nhật.

Cách tạo cảnh như sau: Có các lớp chứa mỗi chỉ mục Z và bạn có thể đặt hình chữ nhật hoặc một số văn bản trên bất kỳ lớp nào bạn muốn. Khái niệm này rất đơn giản. Khi vẽ đối tượng, nó vẽ một pixel [Z-index] sang trái bằng màu đỏ tinh khiết, sau đó vẽ một pixel [Z-index] sang bên phải trong màu lục lam tinh khiết.

Về lý thuyết, các phần chồng chéo nên trừ để trở thành màu đen thuần túy. Trong Chrome, điều này xảy ra để điền hình chữ nhật, vuốt văn bản, nhưng không phải để điền văn bản. Trong Firefox, điều này chỉ xảy ra khi vuốt văn bản.

Mặc dù hiệu quả dự định của globalCompositeOperation="darker" phải làm chính xác những gì tôi muốn, rõ ràng là đi xuống con đường này sẽ không mang lại gì ngoài đau đớn.

Có ai ở đây có ý tưởng về cách tôi có thể nhận được hiệu ứng mình muốn mà không sử dụng globalCompositeOperation không? Tôi đã cố gắng rối tung với kênh alpha trên các màu sắc nhưng không thực sự thích cách đó đến với nhau (họ không bao giờ thêm vào màu đen tinh khiết). Tôi có thể vẽ một hình chữ nhật màu đen thứ ba giữa các hình chữ nhật màu đỏ và màu lục lam, nhưng điều đó không giải quyết được vấn đề cho văn bản hoặc hình dạng tùy ý.

Tôi có thể tự mình vẽ pixel-điểm ảnh trong Javascript, nhưng điều đó có vẻ như quá mức cần thiết. Có suy nghĩ gì không?

Answer 1

Nếu bạn vẫn cần điều này, tôi đã viết free context-blender library cho phép bạn thực hiện các chế độ hòa trộn kiểu Photoshop giữa hai canvas. Tôi vẫn chưa nói thêm 'đậm' , nhưng bạn có thể một trong hai:

1. Fork dự án trên GitHub, thêm hỗ trợ của riêng bạn cho tối hơn (đó là khá dễ dàng để xem làm thế nào để thêm một chế độ) và sau đó gửi cho tôi một yêu cầu kéo, hoặc
2. Làm tôi với lời hứa về những người ủng hộ để thêm nó cho bạn. :) Phần cứng duy nhất (như với nhiều chế độ hoà trộn) sẽ cố gắng xác định điều gì là chính xác khi trộn một hoặc hai vùng có độ mờ là < 100%.

Answer 2

Dường như chế độ chính xác trong Firefox là globalCompositeOperation = "difference". Chưa được thử nghiệm trong Chrome hoặc IE.

Bởi vì "sự khác biệt" là một phép toán, nên không có sự mơ hồ trong việc triển khai, không giống như thuật ngữ chủ quan "tối hơn".

Answer 3

Có thể bạn muốn sử dụng darken thay vì darker. darker đã được removed from the specification in 2007