Comentário: Este artigo introduzirá as configurações e o uso da transparência em tela em detalhes. Combinando suporte gradual de enchimento e transparência, ele pode realizar o efeito da máscara da imagem. A demonstração do código de método progressivo linear é o seguinte. Amigos interessados podem se referir a ele. Espero que seja útil para todos.
Explique as configurações de parâmetros e o uso da tela progressiva de preenchimento em HTML5 em detalhes, as configurações e o uso da transparência na tela, combinados com o suporte progressivo de preenchimento e transparência, para obter o efeito da máscara de imagem.1: preenchimento de gradiente
A tela suporta dois métodos de enchimento incremental, um é o enchimento incremental linear (preenchimento de gradiente de linha) e o outro é chamado
Preenchimento radialgradiente. Suas APIs são:
createLinearGradient (x1, y1, x2, y2);
onde x1 e y1 são as coordenadas do primeiro ponto e x2 e y2 são as coordenadas do segundo ponto.
CRESERADADIALGRINGIENTE (X1, Y1, R1, X2, Y2, R2);
Onde X1 e Y1 são as coordenadas do primeiro ponto central, R1 é o raio, x2 e y2 são as coordenadas do segundo ponto central e R2 é o raio.
Defina a cor para cada ponto
addColorstop (posição, cor);
Onde a posição representa a posição, o alcance do tamanho [0 ~ 1], onde 0 representa o primeiro ponto e 1 representa as coordenadas do segundo ponto
A cor representa o valor da cor, o valor da cor de qualquer CSS.
Depois que o objeto de preenchimento progressivo é criado e configurado, ele pode ser usado para definir o texto de implementação de Strokestyle e Fillstyle do contexto.
Preenchimento progressivo de cores de formas geométricas.
Demonstração de código da abordagem progressiva linear:
1. Cor progressiva na direção vertical (y)
// direção vertical/y
var lineGradient = ctx.createlineargradiente (50, 0, 50, 200);
linegradient.addcolorstop (0, 'rgba (255, 0, 0, 1)');
linegradient.addcolorstop (1, 'rgba (255, 255, 0, 1)');
ctx.fillstyle = linhagradiente;
ctx.FillRect (0, 0, 300, 300);
2. Progressão da cor da direção horizontal (x)
// direção horizontal/x
var lineGradient = ctx.createlineargradiente (0, 50, 200, 50);
linegradient.addcolorstop (0, 'rgba (255, 0, 0, 1)');
linegradient.addcolorstop (1, 'rgba (255, 255, 0, 1)');
ctx.fillstyle = linhagradiente;
ctx.FillRect (0, 0, 300, 300);
3. Color vertical e horizontal simultaneamente (direção XY) progressiva
// direção vertical e horizontal
var lineGradient = ctx.createlineargradiente (0, 0, 200, 200);
linegradient.addcolorstop (0, 'rgba (255, 0, 0, 1)');
linegradient.addcolorstop (1, 'rgba (255, 255, 0, 1)');
ctx.fillstyle = linhagradiente;
ctx.FillRect (0, 0, 300, 300);
2: transparente
O suporte de transparência na tela é dividido em configurações de transparência global e local. As configurações da transparência global podem ser definidas
Context.globalalpha é implementado. A transparência local pode ser definida através do FillStyle para Alpha Value Channel em valor de cor
Para alcançá -lo. Os dois métodos de código são os seguintes:
// Alterar o valor alfa global
ctx.globalalpha = 0,5;
ctx.FillRect (50,50,75,50);
// Alterar o alfachannel da cor do estilo de preenchimento
ctx.fillstyle = 'rgba (225.225.225,0.5)';
ctx.FillRect (50,50,75,50);
Os dois efeitos são os mesmos.
Três: Máscara transparente e gradual Efeito das fotos
Use alterações de gradiente de cor radial e transparência para obter efeito de máscara translúcida na imagem e o efeito de execução do script:
var myImage = document.createElement ('img');
myimage.src = "../test.png";
myImage.onload = function () {
ctx.drawimage (myimage, 80, 30, myimage.naturalwidth, myimage.naturalheight);
var radialGradient = ctx.createradialgradient (Canvas.width/2, Canvas.Height/2, 10, Canvas.Width/2, Canvas.Height/2, 200);
radialgradient.addcolorstop (0, 'rgba (247, 247, 247, 0)');
radialgradient.addcolorstop (0,7, 'rgba (120, 120, 120, 0,5)');
radialgradient.addcolorstop (0,9, 'rgba (0, 0, 0, 0,8)');
radialgradient.addcolorstop (1, 'rgba (238, 238, 238, 1)');
ctx.BeginPath ();
ctx.arc (Canvas.width/2, Canvas.Height/2, 300, 0, Math.Pi * 2, True);
ctx.closePath ();
ctx.fillstyle = radialgradiente;
ctx.fill ();
}