HTML5 Processamento de pixels de Canvas

HTML5 Animação de Canvas

HTML5 Gradiente de Canvas

Gradiente de Canvas pode ser usado como um padrão de cor para preenchimento ou traço de forma, em vez de cor pura. A variação tem dois tipos: Linear (linear) e Radial (radial)

1. Gradiente de Canvas pode ser usado como um padrão de cor para preenchimento ou traço de forma, em vez de cor pura. A variação é um padrão de cor que varia de uma cor para outra. Aqui estão alguns exemplos para ilustrar minha ideia:

2. Existem dois tipos de variação:

Linear（linear）
Radial（radial）
variação linear usa um padrão linear horizontal, vertical ou diagonal para mudar a cor.

dois tipos de variação estão descritos neste artigo. A variação radial usa um padrão circular para mudar a cor, mudando a cor de dentro para fora.

variação linear2Como mencionado anteriormente, a variação linear usa um padrão linear para mudar a cor. Use

var canvas = document.getElementById("ex1");
");2var context = canvas.getContext("
　　　　
var x1　=　　　0;
var y1　=　　　0;
var x2　=　100;
var y2　=　　　0;
d");1　=　context.createLinearGradient(x1, y1, x2, y2);

a função createLinearGradient() é usada pelo contexto D para criar uma variação linear createLinearGradient(). Este é um exemplo:4parâmetros: x1e x1，x2e x2。 Isso4parâmetros determinam a direção e a extensão do padrão de variação. A gradiente começa no primeiro ponto x1e x1até o segundo ponto x2e x2。
somente o valor do parâmetro x (para x1como você vê, dois pontos centrais (x2）para criar uma variação horizontal, conforme mostrado a seguir:

　　　　var x1　=　　　0;
　　　　var y1　=　　　0;　　　　var　x2　=　100;
　　　　var y2　=　　　0;
　　　　d");1　=　context.createLinearGradient(x1, y1, x2, y2);

alterando apenas o valor do parâmetro y (para y1e y2）para criar uma variação vertical, conforme mostrado a seguir:

　　　　var x1　=　　　0;　　　　var　y1　=　　　0;
　　　　var x2　=　　　0;　　　　var　y2　=　100;
　　　　d");1　=　context.createLinearGradient(x1, y1, x2, y2);

Criar uma variação diagonal alterando os parâmetros x e y ao mesmo tempo. Este é um exemplo:

　　　　var x1　=　　　0;
　　　　var y1　=　　　0;
　　　　var x2　=　100;
　　　　var y2　=　100;
　　　　d");1　=　context.createLinearGradient(x1, y1, x2, y2);

ponto de cor

O exemplo acima não mostra as cores da variação. Para definir as cores da variação, você pode usar a função addColorStop() no objeto de variação. Este é um exemplo:

d");1　= contexto.createLinearGradient(0,0,100, 0,
0,0);1.addColorStop(0,39;rgb(255,　0,　0)');
0,0);1.addColorStop(1, 'rgb(　　0,　0,　0)');

a função addColorStop() tem2parâmetros. O primeiro parâmetro está entre 0 e1número. Este número indica a distância onde o marcador de cor será colocado na área de variação. O segundo parâmetro é a cor em si. Observe como este exemplo usa a representação de cor rbg(red, green, blue), onde cada vermelho/verde/o valor azul pode ser de 0 a255número (com1bytes representam).
O exemplo acima adicionou dois marcadores de cor. O primeiro é vermelho, configurado para começar no ponto de partida da variação (o valor do primeiro parâmetro é 0). A segunda cor é preta, configurada para estar no final da área de variação (o primeiro parâmetro é1）。
Você pode adicionar mais de duas cores de parâmetro ao gradiente. Este é um exemplo com3exemplo de cores de parâmetro:

d");1　= contexto.createLinearGradient(0,0,100, 0,
0,0);1.addColorStop(0　　,　'rgb(255,　0,　0)');
0,0);1.addColorStop(0.5, 'rgb(　　0,　0,　255);
0,0);1.addColorStop(1　　, 'rgb(　　0,　0,　0)');

Este exemplo adicionou azul no meio do gradiente. Portanto, o gradiente passará do vermelho para o azul, e então para o preto.

Usar gradiente como estilo de preenchimento ou traço

Você pode usar o gradiente como estilo de preenchimento ou traço.2Definindo o estilo de preenchimento ou contorno Dcontexto fillStyle ou strokeStyle para apontar para o objeto gradiente pode concluir essa operação. Este é um exemplo:

d");1　= contexto.createLinearGradient(0,0,100, 0,
0,0);1.addColorStop(0　　,　'rgb(255,　0,　0)');
0,0);1.addColorStop(0.5, 'rgb(　　0,　0,　255);
0,0);1.addColorStop(1　　, 'rgb(　　0,　0,　0)');
contexto.fillStyle = linearGradient1;
contexto.strokeStyle = linearGradient1;

Agora, você pode usar o gradiente como cor de preenchimento ou contorno para o desenho. Este é um exemplo de desenhar dois retângulos-um preenchido e o outro contornado (esboço):

<canvas id="ex2" width="500" height="125" style="border:　1px sólido #cccccc;">
　　　　HTML5　Canvas não suportado
0);/canvas>
<script>
var canvas = document.getElementById("ex2");
");2var context = canvas.getContext("
d");1　= contexto.createLinearGradient(0,0,100, 0,　//horizontal gradient
0,0);1.addColorStop(0　　,　'rgb(255,　0,　　　0)');
0,0);1.addColorStop(0.5, 'rgb(　　0,　0,　255)');
0,0);1.addColorStop(1　　, 'rgb(　　0,　0,　　　0)');
, 0)

context.fillRect(10,10,10context.fillStyle = linearGradient　100,
d");2　var linearGradient125,0,　225,0);　//horizontal gradient
0,0);2.addColorStop(0　　,　'rgb(255,　0,　　　0)');
0,0);2.addColorStop(0.5, 'rgb(　　0,　0,　255)');
0,0);2.addColorStop(1　　, 'rgb(　　0,　0,　　　0)');
contexto.strokeStyle = linearGradient2;
contexto.strokeRect(125,　10,　10context.fillStyle = linearGradient　100,
0);/<

Este é o resultado ao desenhar na tela:

escala de gradiente

É importante entender o grau de variação da gradiente. Se a gradiente começar em x = 10estender-se até x = 110então apenas os valores de x entre10até110os gráficos desenhados fora dessa área ainda serão afetados pelo gradiente, mas usarão a primeira ou última cor do gradiente para o desenho.
Por exemplo, suponha uma gradiente de x = 150 estender-se até x =350. A gradiente começará em azul e se transformará em verde. O valor de x menor que150 desenhados todos os gráficos serão desenhados em azul. O valor de x maior que350 desenhados todos os gráficos serão desenhados em verde. Apenas os valores de x entre15e35entre 0 e 0 os gráficos terão cor de gradiente.
Este é um exemplo de código, que usa aabove gradiente para desenhar5um retângulo para ilustrar isso

<canvas id="ex3" width="500" height="250" style="border:　1px sólido #cccccc;">
　　　　HTML5　Canvas não suportado
0);/canvas>
<script>
var canvas = document.getElementById("ex3");
");2var context = canvas.getContext("
d");1　var linearGradient15= context.createLinearGradient(　350, 0,
0,0);1.addColorStop(0,39;rgb(0,　255)');
0,0);1.addColorStop(1, 'rgb(0,　255linearGradient39;);
, 0)

context.fillRect(10,10,13context.fillStyle = linearGradient　100,
context.fillRect(15context.fillStyle = linearGradient10,　200,　100,
context.fillRect(36context.fillStyle = linearGradient10,　13context.fillStyle = linearGradient　100,
context.fillRect(10context.fillStyle = linearGradient12context.fillStyle = linearGradient　15context.fillStyle = linearGradient　100,
context.fillRect(28context.fillStyle = linearGradient12context.fillStyle = linearGradient　15context.fillStyle = linearGradient　100,
0);/<

›15isto é o resultado ao desenhar na tela. Note que apenas o valor x35até

tem cor de gradiente, enquanto o resto das gráficas é azul completo (primeiro marcador de cor) ou verde completo (último marcador de cor).2neste exemplo, apenas a gráfica entre3cores, mas se usar
cores, o efeito é o mesmo. Fora da área da gradiente, usa-se apenas a primeira e a última cor de parada.

A intensidade da gradiente é importante para entender a cor correta da forma. Em muitos casos, pode ser necessário definir uma gradiente específica para cada forma para se adequar à área de desenho da forma.

gradiente radial

A gradiente radial é um padrão circular que se estende de uma cor interna para uma ou mais cores externas. Abaixo estão alguns exemplos gráficos:2A gradiente radial é definida por

var x1　=　100;　　　//　definição de um círculo. Cada círculo tem um ponto central e um raio. Este é um exemplo de código:　1y de
var y1　=　100;　　　//　x de　1y de
var r1　=　30;　　　　//　.circle centro de ponto　1raio de
var x2　=　100;　　　//　definição de um círculo. Cada círculo tem um ponto central e um raio. Este é um exemplo de código:　2y de
var y2　=　100;　　　//　x de　2y de
var r2　=　100;　　　//　.circle centro de ponto　2raio de
var radialGradient1　= context.createRadialGradient(x1, y1, r1, x2, y2, r2);
radialGradient1.addColorStop(0,39;rgb(0,　255)');
radialGradient1.addColorStop(1, 'rgb(0,　255, 0)');
context.fillStyle = radialGradient;1;
context.fillRect(10,10,　200,　200);

.circle1e x1como você vê, dois pontos centrais (x2e x2，y1). Eles definem dois raios (r2e r2). Esses são passados como parâmetros para createRadialGradient()
A função do contexto D.
Deve-se usar raios diferentes para definir os dois círculos, para que eles causem um círculo interno e um externo (pelo menos no tamanho). Então, a cor na gradiente se estenderá de um círculo circular para o outro.
funciona da mesma maneira que a gradiente linear. Eles definem qual cor será usada na gradiente e onde a cor deve ser colocada dentro da faixa de gradiente.1indica que a cor começará onde está o segundo círculo. A cor adicionada será correspondida em algum lugar entre os dois círculos. Por exemplo, o primeiro parâmetro 0 na cor de parada indica que a cor começará onde está o primeiro círculo. O primeiro parâmetro da cor de parada
Isto é em HTML5O resultado do código ao desenhar na tela:

Se dois círculos compartilham o mesmo ponto central, a gradiente será completamente circular, e a cor se deslocará gradualmente do círculo interno para o externo. Se os pontos centrais dos dois círculos forem diferentes, a gradiente será mais parecida com um cone, como a luz de uma lâmpada (não ortogonalmente direcionada para a superfície). Este é um exemplo de código semelhante a um cone:

var x1　=　100;
var y1　=　100;
var r1　=　30;
var x2　=　150;
var y2　=　125;
var r2　=　100;
var radialGradient1　= context.createRadialGradient(x1, y1, r1, x2, y2, r2);
radialGradient1.addColorStop(0,39;rgb(0,　255)');
radialGradient1.addColorStop(1, 'rgb(0,　255, 0)');
context.fillStyle = radialGradient;1;
context.fillRect(10,10,　200,　200);

Assim é ao desenhar uma gradiente no canvas: