Por padrão, se um objeto (fonte) for desenhado em cima de outro objeto (destino) no Canvas, o navegador simplesmente sobreporá a imagem do objeto de origem sobre a imagem do objeto de destino.
Simplificando, no Canvas, combinando a imagem de origem e de destino por meio globalCompositeOperation no Canvas, você pode obter efeitos diferentes, como na figura a seguir:
Conforme mostrado na imagem acima, a maçã vermelha e o círculo preto se transformam em uma maçã vermelha mordida por meio destination-out globalCompositeOperation . Em outras palavras, através da síntese de imagens no Canvas, podemos obter alguns efeitos únicos, como por exemplo, queremos criar um efeito de loteria de raspadinha. Hoje aprenderemos como usar a síntese de imagens no Canvas.
Há um total de 26 tipos de valores para o atributo globalCompositeOperation no Canvas. Cada tipo produzirá efeitos diferentes. Claro, você poderá ver que os efeitos serão diferentes e alguns efeitos podem não ser renderizados normalmente no navegador. Mas não importa, vamos simplesmente entender os significados e efeitos desses 26 tipos.
ctx.save(); 2, verdadeiro);ctx.closePath();
O código acima desenhará um círculo vermelho com um raio de 80px na tela do Canvas, que aqui é chamado de fonte da imagem.
ctx.fillStyle = 'laranja'; ctx.beginPath(); ();
Este código desenhará um círculo laranja com um raio de 80px na tela do Canvas, que é chamado de alvo de imagem aqui. Ao definir o valor de globalCompositeOperation entre a imagem de origem e a imagem de destino, a operação de síntese de imagem pode ser concluída:
ctx.save(); 2, verdadeiro);ctx.closePath(); 'fonte-in'; ();ctx.restore();
O efeito obtido neste momento é o seguinte:
fonte source-over é o valor padrão da propriedade globalCompositeOperation . O gráfico de origem cobre o gráfico de destino. O gráfico de origem é exibido nas partes opacas do gráfico de origem e o gráfico de destino é exibido no restante.
source-in : somente as partes do gráfico de destino e do gráfico de origem que se sobrepõem e são opacas são desenhadas.
source-out : A parte não sobreposta do gráfico de destino e do gráfico de origem será desenhada.
source-atop : Os gráficos de destino na parte sobreposta do conteúdo dos gráficos de destino e dos gráficos de origem serão desenhados.
destination-over : os gráficos de destino atrás dos gráficos de destino e do conteúdo gráfico de origem serão desenhados.
destination-in : A parte sobreposta do gráfico de destino e do gráfico de origem será mantida (gráfico de origem) e o restante será exibido de forma transparente
Os demais não serão mostrados um por um. A descrição específica correspondente a cada valor pode ser encontrada aqui.
Combinado com globalAlpha para controlar operações de síntese de imagens Existem duas propriedades globalAlpha e globalCompositeOperation no Canvas para controlar as operações de síntese de imagens:
globalAlpha : Defina a transparência da imagem. A propriedade globalAlpha tem como padrão 1 , indicando opacidade total, e pode ser definida de 0 (totalmente transparente) a 1 (totalmente opaco). Este valor deve ser definido antes do gráfico ser desenhadoglobalCompositeOperation : O valor deste atributo controla o desenho de gráficos no bitmap Canvas atual após globalAlpha e todas as transformações terem entrado em vigor.Em nossos negócios diários, frequentemente vemos efeitos de loteria, como raspadinhas. Se usarmos o Canvas para fazer isso, usaremos a síntese de imagens do Canvas.
<div id=card> <canvas id=canvasOne width=500 height=300></canvas> </div>
Exibimos o prêmio (se for uma imagem) como plano de fundo div#card . Em seguida, primeiro desenhe um retângulo cinza (imagem de origem) no Canvas, depois desenhe dinamicamente uma nova imagem por meio de eventos de mouse (ou eventos de toque) (isso é semelhante a um pincel) e defina o valor do atributo globalCompositeOperation como destination-out (novo draw As partes não sobrepostas dos gráficos e o conteúdo gráfico que já existe na tela de destino serão retidos). Quando o apagamento do pincel for maior que uma determinada proporção, exclua o elemento <canvas> ou use clearRect() para limpar a tela do Canvas. para mostrar o plano de fundo div
Neste artigo, apresentamos principalmente a síntese de imagens do Canvas. No Canvas, a operação de síntese de imagens pode ser controlada por meio de dois atributos, globalAlpha e globalCompositeOperation, para obter o efeito de síntese de imagens. Espero que seja útil para o aprendizado de todos e também espero que todos apoiem a Rede VeVb Wulin.