O segundo caso de uso de fillStyle é o preenchimento gradiente. As cores gradientes são divididas em cores gradientes lineares e cores gradientes radiais.
Gradiente linear: dividido aproximadamente em duas etapas. Duas novas funções do canvas serão usadas aqui.
Etapa 1: Use uma nova função createLinearGradient(xstart,ystart,xend,yend);var linearGrad = context.createLinearGradient(xstart,ystart,xend,yend);
Possui quatro parâmetros. Eles são, respectivamente, xstart, ystart, xend e yend, que formam duas coordenadas, e essas duas coordenadas formam um segmento de linha. Este segmento de linha é na verdade uma linha gradiente. As linhas de gradiente são usadas para definir a direção e a escala do gradiente.
A segunda etapa: Adicionar colorStop com base nesta linha de gradiente. Este método é chamado addColorStop (stop, color). Possui dois parâmetros: stop e color. O primeiro parâmetro é um valor de ponto flutuante usado para determinar a posição da cor chave. O segundo parâmetro é usado para determinar a cor da cor chave. linearGrad.addColorStop(parar,cor);
Após concluir essas duas etapas, a variável linearGrad pode ser passada para este atributo como fillStyle.
Veja o código:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, escala inicial=1.0> <meta http-equiv=X-UA -Conteúdo compatível=ie=edge> <title>Gradiente linear</title></head><body> <canvas id=canvas style=border: 1px sólido #aaa;display:block;margin:0 auto></canvas></body></html><script> window.onload = function () { var canvas = document.getElementById(canvas); ; canvas.height = 600; if (canvas.getContext(2d)) { var context = canvas.getContext(2d); context.createLinearGradient(0, 0, 800, 600); //A coordenada inicial da linha de gradiente é (0,0) e a coordenada final é (800,600) linearGrad.addColorStop(0.0, '#000'); O primeiro parâmetro representa a posição da cor chave, 0 representa a posição inicial, 1 representa a posição final e o segundo parâmetro representa a cor da cor chave. linearGrad.addColorStop(1.0, '#fff'); context.fillStyle = linearGrad; ') } }</script>Renderização:
Depois de criarmos a variável linearGrad, podemos addColorStop e adicionar muitos.
Por exemplo:
Código:
var linearGrad = context.createLinearGradient(0, 0, 800, 600); //A coordenada inicial da linha de gradiente é (0,0) e a coordenada final é (800,600) linearGrad.addColorStop(0.0, '#fff') ; linearGrad.addColorStop(0,25, '#FB3'); '#690'); linearGrad.addColorStop(0.75, '#09C');
Renderização:
Além disso, a linha de gradiente que definimos é inclinada e também podemos defini-la como horizontal ou vertical. Precisamos apenas modificar as coordenadas finais da linha de gradiente. Veja o código para fazer um gradiente horizontal:
var linearGrad = context.createLinearGradient(0, 0, 800, 0);
Renderização:
Cor gradiente vertical:
var linearGrad = context.createLinearGradient(0, 0, 800, 0);
Renderização:
Não importa se ela está inclinada horizontalmente ou verticalmente, o que fazemos percorre toda a tela. Então, qual será o efeito se nossa linha de gradiente for atribuída apenas a uma parte da tela? Vamos modificá-lo
var linearGrad = context.createLinearGradient(0, 0, 400, 300);
Renderização:
Da mesma forma, a linha gradiente que criamos também pode ultrapassar a largura e altura máximas desta tela. Vamos modificá-lo
var linearGrad = context.createLinearGradient(-200, -100, 1000, 800);
Renderização:
Além disso, as formas preenchidas que desenhamos podem não ocupar necessariamente toda a tela. Podemos ajustar a forma que definimos arbitrariamente. Esta forma preenchida encontrará a cor de preenchimento apropriada na linha de gradiente que definimos e a preencherá. Por exemplo:
var linearGrad = context.createLinearGradient(-200, -100, 1000, 800);
Renderização:
Gradiente radial: A diferença do gradiente linear é que o gradiente radial define um gradiente radial. Este gradiente radial é definido com base em dois círculos concêntricos. Ao contrário de um gradiente linear que é definido entre dois pontos.
Gradientes radiais também requerem duas etapas para serem concluídos.
Passo 1: Use uma nova função createRadialGradient(x0,y0,r0,x1,y1,r1); Os três primeiros parâmetros definem as coordenadas e o raio do primeiro anel, e os três últimos parâmetros definem as coordenadas e o raio do segundo anel. Todo o gradiente radial ocorre entre esses dois círculos. var radialGrad = context.createRadialGradient(x0,y0,r0,x1,y1,r1);
Passo 2: É igual ao gradiente linear, então não vou apresentá-lo em detalhes. radialGrad.addColorStop(parar,cor);
O código é muito semelhante ao código para gradientes lineares. É que createRadialGradient é usado aqui. Passamos os parâmetros createRadialGradient(300,300,0,300,300,500). Os três primeiros parâmetros definem um ponto com raio 0 no centro da tela. Os últimos três parâmetros definem um grande círculo com raio de 500 no centro da tela. Isso define um gradiente radial irradiando para fora de um ponto. Dê uma olhada no código
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, escala inicial=1.0> <meta http-equiv=X-UA -Conteúdo compatível=ie=edge> <title>Gradial radial</title></head><body> <canvas id=canvas style=border: 1px sólido #aaa;display:block;margin:0 auto></canvas></body></html><script> window.onload = function () { var canvas = document.getElementById(canvas); ; canvas.height = 600; if (canvas.getContext(2d)) { var context = canvas.getContext(2d); context.createRadialGradient(300, 300, 0, 300, 300, 500); radialGrad.addColorStop(0,0, '#fff'); radialGrad.addColorStop(0,25, '#FB3'); '); radialGrad.addColorStop(0.75, '#09C'); radialGrad.addColorStop(1.0, '#000'); Seu navegador não suporta canvas, tente alterar seu navegador~') } }</script>Renderização:
Você pode tentar alterar os parâmetros para ver quais efeitos diferentes haverá.
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.