De forma predeterminada, si un objeto (fuente) se dibuja encima de otro objeto (destino) en Canvas, el navegador simplemente superpondrá la imagen del objeto de origen encima de la imagen del objeto de destino.
En pocas palabras, en Canvas, al combinar la imagen de origen y la imagen de destino a través de globalCompositeOperation en Canvas, puede obtener diferentes efectos, como la siguiente figura:
Como se muestra en la imagen de arriba, la manzana roja y el círculo negro se convierten en una manzana roja mordida a través destination-out de globalCompositeOperation . En otras palabras, a través de la síntesis de imágenes en Canvas, podemos lograr algunos efectos únicos, como por ejemplo, queremos crear un efecto de lotería de tarjetas rasca y gana. Hoy aprenderemos a utilizar la síntesis de imágenes en Canvas.
Hay un total de 26 tipos de valores para el atributo globalCompositeOperation en Canvas. Cada tipo producirá efectos diferentes. Por supuesto, es posible que vea que los efectos serán diferentes y es posible que algunos efectos no se representen normalmente en el navegador. Pero no importa, simplemente comprendamos los significados y efectos de estos 26 tipos.
ctx.save(); ctx.translate(w/2, h/2); ctx.fillStyle = 'rojo'; ctx.beginPath(); 2, verdadero); ctx.closePath();
El código anterior dibujará un círculo rojo con un radio de 80px en el lienzo del Lienzo, que aquí se denomina fuente de la imagen.
ctx.fillStyle = 'naranja'; ctx.beginPath(); ctx.arc(40, 20, 80, 0, Math.PI * 2, verdadero); ();
Este código dibujará un círculo naranja con un radio de 80px en el lienzo del Lienzo, que aquí se denomina objetivo de la imagen. Al establecer el valor de globalCompositeOperation entre la imagen de origen y la imagen de destino, se puede completar la operación de síntesis de la imagen:
ctx.save(); ctx.translate(w/2, h/2); ctx.fillStyle = 'rojo'; ctx.beginPath(); 2, verdadero); ctx.closePath(); ctx.fill(); 'fuente de entrada'; ctx.fillStyle = 'naranja'; ctx.beginPath(); ctx.arc(40, 20, 80, 0, Math.PI * 2, verdadero); (); ctx.restaurar();
El efecto obtenido en este momento es el siguiente:
fuente terminada source-over es el valor predeterminado de la propiedad globalCompositeOperation . El gráfico de origen cubre el gráfico de destino. El gráfico de origen se muestra en las partes opacas del gráfico de origen y el gráfico de destino se muestra en el resto.
source-in : solo se dibujan las partes del gráfico de destino y del gráfico de origen que se superponen y son opacas.
source-out : se dibujará la parte que no se superpone del gráfico de destino y el gráfico de origen.
source-atop : Se dibujarán los gráficos de destino en la parte superpuesta del contenido de los gráficos de destino y los gráficos de origen.
destination-over : Se dibujarán los gráficos de destino detrás de los gráficos de destino y el contenido de los gráficos de origen.
destination-in : La parte superpuesta del gráfico de destino y el gráfico de origen se conservará (gráfico de origen) y el resto se mostrará de forma transparente.
Los demás no se mostrarán uno por uno. La descripción específica correspondiente a cada valor se puede encontrar aquí.
Combinado con globalAlpha para controlar las operaciones de síntesis de imágenes. Hay dos propiedades globalAlpha y globalCompositeOperation en Canvas para controlar las operaciones de síntesis de imágenes:
globalAlpha : establece la transparencia de la imagen. La propiedad globalAlpha tiene el valor predeterminado 1 , lo que indica opacidad total, y se puede establecer entre 0 (totalmente transparente) y 1 (totalmente opaco). Este valor debe establecerse antes de dibujar el gráfico.globalCompositeOperation : el valor de este atributo controla el dibujo de gráficos en el mapa de bits de Canvas actual después de que globalAlpha y todas las transformaciones hayan tenido efecto.En nuestro trabajo diario, a menudo vemos efectos de lotería, como tarjetas rasca y gana. Si usamos Canvas para hacerlo, usaremos la síntesis de imágenes de Canvas.
<div id=tarjeta> <canvas id=canvasOne ancho=500 alto=300></canvas> </div>
Mostramos el premio (si es una imagen) como fondo de div#card . Luego, primero dibuje un rectángulo gris (imagen de origen) en Canvas, luego dibuje dinámicamente una nueva imagen a través de eventos del mouse (o eventos táctiles) (esto es similar a un pincel) y establezca el valor del atributo globalCompositeOperation en destination-out (nuevo dibujar Se conservarán las partes no superpuestas de los gráficos y el contenido de los gráficos que ya existen en el lienzo de destino). Cuando el borrado del pincel sea mayor que una cierta proporción, elimine el elemento <canvas> o use clearRect() para borrar el lienzo del Lienzo. para mostrar el fondo div
En este artículo, presentamos principalmente la síntesis de imágenes de Canvas. En Canvas, la operación de síntesis de imágenes se puede controlar a través de dos atributos, globalAlpha y globalCompositeOperation, para lograr el efecto de síntesis de imágenes. Espero que sea útil para el aprendizaje de todos y también espero que todos apoyen VeVb Wulin Network.