Tutorial HTML5: Tag de tela desenha gráficos de gradiente linear

Artigo Introdução de wulin.com (www.vevb.com): a aplicação da tag de tela de treinamento diário HTML5 - desenhando gráficos de gradiente linear.

Até agora, o conhecimento básico de desenhar gráficos usando tela foi introduzido. A partir desta seção, apresentaremos um dos outros conhecimentos mais avançados de desenho - gradiente linear. Primeiro, vamos revisar o estilo de preenchimento de cores especificado em "Prática diária HTML5: Aplicação de tags de lona - Retângulos de desenho". Ao desenhar um gradiente linear, precisamos usar um novo objeto - o objeto lineargradiente e usar o método CreateLinearGradIend do objeto de contexto do gráfico para criar o objeto. A definição desse método é a seguinte:

Context.createlineargradiente (XStart, Ystart, Xend, Yend);

XStart: o eixo horizontal do ponto de partida do gradiente

Ystart: a coordenada vertical do ponto de partida do gradiente

Xend: eixo horizontal do ponto final do gradiente

Yend: a coordenada vertical do ponto final do gradiente

Ao usar esse método, é criado um objeto lineargradiente usando dois pontos de coordenadas. Então, como a cor do gradiente deve ser definida?

Depois de passarmos pelo objeto lineargradiente, usamos o método AddColorStop para defini -lo. O exemplo deste método é o seguinte:

context.addcolorstop (deslocamento, cor);

Use este método para anexar a cor do gradiente, que possui dois parâmetros:

Deslocamento: é o deslocamento do número de ponto flutuante entre 0-1 da cor, deixando o ponto de partida do gradiente, o que define a cor para o deslocamento do ponto de início do gradiente.

Cor: é a cor usada para definir o desenho

Ilustração do parâmetro offset no método AddColorstop