Lienzo HTML5: Cómo falsificar globalCompositeOperation = "more-more"

Question

He buscado en Google y en Google, y todo lo que puedo encontrar, incluso en StackOverflow, es "el soporte se rompió en la mayoría de los principales navegadores". No es una solución real a mi problema.

Playboy de este mes vino con un par de gafas 3D (rojo/cian) para ver el deslumbrante folleto central. Naturalmente, toco los Internets para encontrar todos los anaglifos rojo/cian que pude y miro lo asombrosos que son. Eventualmente encontré algunos GIF animados, lo que me llevó a la idea de que tal vez debería hacer algo genial en Canvas Canvas que te permita poner formas en una escena en 3D.

This is how far I got. Solo funciona bien en Google Chrome. En Firefox, el "texto elevado" debería verse correcto, pero no los rectángulos.

La manera en que estoy generando la escena es así: Hay capas que contienen cada una un índice Z, y puede colocar un rectángulo o texto en la capa que desee. El concepto es simple Al dibujar el objeto, dibuja un [Z-index] píxeles a la izquierda en rojo puro, luego dibuja un [Z-index] píxeles a la derecha en cian puro.

En teoría, las partes superpuestas deben restar para convertirse en negro puro. En Chrome, esto sucede para rellenar rectángulos, acariciar texto, pero no para rellenar texto. En Firefox, esto solo sucede para acariciar texto.

Aunque el efecto deseado de globalCompositeOperation="darker" debe hacer exactamente lo que quiero, es obvio que seguir este camino no traerá más que dolor.

¿Alguien aquí tiene una idea de cómo puedo obtener el efecto que quiero sin usar globalCompositeOperation? Intenté jugar con el canal alfa en los colores, pero realmente no me gustó cómo se unieron (nunca se suman al negro puro). Podría dibujar un tercer rectángulo negro entre los rojos y los cian, pero eso no resuelve el problema del texto o las formas arbitrarias.

Podría hacer el píxel por píxel en el Javascript, pero parece una exageración. ¿Alguna idea?

Answer 1

Si aún necesita esto, he escrito un free context-blender library que le permite realizar modos de mezcla estilo Photoshop entre dos lienzos. no he añadido aún 'más oscuro' , pero bien podría:

1. Tenedor del proyecto en GitHub, añade su propio soporte para más oscura (que es bastante fácil ver cómo añadir un modo) y luego enviarme una solicitud de extracción, o
2. Ply me con promesas de votos positivos para que se lo agreguen. :) La única parte difícil (como con muchos de los modos de fusión) intentará determinar qué es lo correcto al mezclar una o dos áreas que son < 100% de opacidad.

Answer 2

Parece que el modo correcto en Firefox es globalCompositeOperation = "difference". No lo he probado en Chrome o IE.

Como "diferencia" es una operación matemática, no hay ambigüedad en la implementación, a diferencia del término subjetivo "más oscuro".

Answer 3

Quizás le gustaría usar darken en lugar de darker. darker ha sido removed from the specification in 2007