English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
En HTML5Al dibujar formas en el lienzo, se puede configurar cómo se combina el contenido que se dibuja con el contenido ya dibujado en el lienzo. Este artículo explica cómo mezclar el contenido de la pintura con el contenido existente en el lienzo.
2El contexto D tiene dos propiedades que controlan el modo de合成 de la lienzo. Estas son:
globalAlpha
globalCompositeOperation
La propiedad globalAlpha determina la opacidad del contenido que se dibuja/Opacidad. Puede tomar valores entre1Entre los valores. 0 representa que el contenido que dibujas es completamente transparente. El valor es 0.5Representa que el contenido que dibujas es semitransparente. El valor es1Representa que el contenido que dibujas es completamente opaco. El valor predeterminado es1.
La propiedad globalAlpha se configura como sigue:
context.globalAlpha = 0.5;
La propiedad globalCompositeOperation determina cómo se mezcla el contenido que dibujas con la gráfica existente en el lienzo.
La propiedad globalCompositeOperation se configura como sigue:
context.globalCompositeOperation = "copy";
La propiedad globalCompositeOperation referencia "fuente" y "destino", y especifica cómo mezclar la fuente y el destino. La fuente es el contenido que dibujas, y el destino es el contenido que ya se ha dibujado. A continuación se muestra una lista de posibles valores y su significado:
| valor | descripción |
copiar | En los lugares donde la fuente y el destino se superponen, se mostrará la fuente. |
destino-atop | Cuando la fuente y el destino se superponen y ambos son opacos, se mostrará el destino.Si el destino es transparente, se mostrará la fuente. |
destino-in | En los lugares donde la fuente y el destino se superponen y ambos son opacos, se mostrará el destino.En los lugares sin superposición no se mostrará la fuente. |
destino-out | Se mostrará el destino en cualquier lugar donde la fuente y el destino no se superponen.Se mostrará la transparencia en cualquier otro lugar. |
destino-over | En los lugares donde la fuente y el destino se superponen, se mostrará el destino.Si no hay superposición, se mostrará la fuente. |
fuente-atop | En los lugares donde la fuente y el destino se superponen, se mostrará la fuente.En los lugares sin superposición, o cuando la fuente es transparente, se mostrará el destino. |
fuente-in | Cuando la fuente y el destino se superponen y ambos son opacos, se mostrará la fuente.Se mostrará la transparencia en cualquier otro lugar. |
fuente-out | En los lugares donde la fuente y el destino no se superponen, se mostrará la fuente.Se mostrará la transparencia en cualquier otro lugar. |
fuente-over | Cuando la fuente es opaca, se mostrará la fuente.el destino se muestra en cualquier otro lugar.}} |
lighter | Los colores de origen y destino se superponen, haciendo que los colores sean más brillantes, hacia1valores de color (la luminosidad máxima del color) se mueven. |
xor |
Este es un ejemplo de lienzo donde puede usar modos de composición y valores alpha. Puede cambiar los modos de composición haciendo clic en el botón. Puede cambiar el modo Alpha utilizando los controles debajo del lienzo.
globalAlpha
si ve el campo de texto globalAlpha, ingrese un valor entre10entre los valores. El código convertirá los valores a1entre los valores. De lo contrario, utilice el control deslizante.
Nota: Al escribir este artículo, Firefox y Chrome manejan estos modos de composición de manera diferente. También parece que difiere de rects y text, cómo funcionan estos modos. Pruebe varios modos en varios navegadores que planea soportar para entender cómo funcionan.