API de tela HTML5 de programação

<script type = "text/javascript">

tentar

{

Document.CreateElement ("Canvas"). GetContext ("2D");

document.getElementById ("suporte"). innerhtml = "ok";

}

captura (e)

{

Document.getElementById ("Suporte"). Innerhtml = E.Message;

}

</script>

// Obtenha o elemento tela e seu contexto de desenho var tela = document.getElementById ("diagonal");

var context = Canvas.getContext ("2D");

// Crie um caminho com coordenadas absolutas

context.BeginPath ();

context.moveto (70, 140);

context.lineto (140, 70);

// Desenhe esta linha na tela

context.stroke ();

Os mesmos efeitos acima podem ser alcançados através da transformação (escala, tradução, rotação), etc.

Desenhe linhas diagonais por transformação

// Obtenha o elemento de tela e seu contexto de desenho

var canvas = document.getElementById ("diagonal");

var context = Canvas.getContext ("2D");

// Salvar o status de desenho atual

context.Save ();

// mova o contexto de desenho para o canto inferior direito

context.Translate (70, 140);

// desenha o mesmo segmento de linha que o anterior com a origem como o ponto de partida

context.BeginPath ();

context.moveto (0, 0);

context.lineto (70, -70);

context.stroke (); </p> <p> context.restore ();

Os caminhos na API de tela HTML5 representam qualquer forma que você desejar renderizar.

BeginPath (): Não importa que tipo de gráfico você comece a desenhar, a primeira coisa que você precisa ligar é o BEGNPATH. Essa função simples não leva parâmetros e é usada para notificar a tela que está prestes a começar a desenhar um novo gráfico.

moveto (x, y): sem desenho, mova a posição atual para a nova coordenada de destino (x, y).

Lineto (x, y): não apenas move a posição atual para a nova coordenada de destino (x, y), mas também desenha uma linha reta entre as duas coordenadas.

ClosePath (): Esta função se comporta muito parecida com lineto. A única diferença é que o ClosePath usará automaticamente a coordenada inicial do caminho como coordenada de destino. Ele também informa a tela que a figura desenhada atualmente foi fechada ou formou uma área completamente fechada, o que é muito útil para futuros preenchimentos e derrames.

Desenhe um dossel de pinheiro

função createCanopypath (contexto) {

// Desenhe o dossel da árvore

context.BeginPath (); </p> <p> context.moveto (-25, -50);

context.lineto (-10, -80);

context.lineto (-20, -80);

context.lineto (-5, -110);

context.lineto (-15, -110); </p> <p> // vértice da árvore

context.lineto (0, -140); </p> <p> context.lineto (15, -110);

context.lineto (5, -110);

context.lineto (20, -80);

context.lineto (10, -80);

context.lineto (25, -50);

// conecte o ponto de partida e feche o caminho

context.ClosePath ();

} </p> <p> função drawtrails () {

var canvas = document.getElementById ('diagonal');

var context = canvas.getContext ('2d'); </p> <p> context.save ();

context.Translate (130, 250); </p> <p> // Crie um caminho que expressa o dossel

createCanopypath (contexto); </p> <p> // desenhe o caminho atual

context.stroke ();

context.restore ();

} </p> <p> window.addeventListener ("load", drawtrails, true);

O modo AVC permite que o dossel pareça mais realista.

// larga as linhas

context.LineWidth = 4;

// o ponto de junção do caminho suave

context.LineJoin = 'Round';

//cor

context.strokestyle = '#663300';

// desenha o caminho atual

context.stroke ();

Adicionamos troncos à árvore

context.Save ();

context.Translate (-10, 350);

context.beginpath (); </p> <p> // A primeira curva se dobra para o canto superior direito

context.moveto (0, 0);

context.quadraticcurveto (170, -50, 260, -190); </p> <p> // dobra para o canto inferior direito

context.quadraticcurveto (310, -250, 410, -250);

context.strokestyle = '#663300';

context.LineWidth = 20;

context.stroke (); </p> <p> // restaurar o estado de tela anterior

context.restore ();

Você deve esperar até que a imagem esteja totalmente carregada antes que ela possa ser operada. Os navegadores geralmente carregam imagens de forma assíncrona quando o script da página é executado. Se você tentar renderizar a imagem para a tela antes que ela esteja totalmente carregada, a tela não exibirá nenhuma imagem. Portanto, preste atenção especial a garantir que a imagem seja carregada antes da renderização.

// Carregar a imagem

var bark = new Image ();

bark.src = "bark.jpg"; </p> <p> // Depois que a imagem é carregada, chame a função de desenho

bark.onload = function () {

drawtrails ();

}

Mostrar fotos:

O uso de gradientes requer três etapas:

(1) Crie um objeto de gradiente

(2) Defina a cor para objetos de gradiente e indique o método de transição

(3) Defina gradientes para estilos de preenchimento ou estilos de traços no contexto

// Crie um gradiente horizontal de terceira ordem que é usado como uma textura do tronco

var trunkgradient = context.createlineargradiente (-5, -50, 5, -50); </p> <p> // A borda esquerda do tronco é de cor marrom média

trunkgradient.addcolorstop (0, '#663300'); </p> <p> // Há alguma cor para falar no meio esquerdo do tronco da árvore

trunkgradient.addcolorstop (0,4, '#996600'); </p> <p> // A cor da borda direita deve ser mais escura

trunkgradient.addcolorstop (1, '#552200'); </p> <p> // encher o porta -malas com gradientes

context.fillstyle = TrunkGradient;

context.fillrect (-5, -50, 10, 50);

// Crie um gradiente vertical para projetar o dossel no porta -malas

var CanopyShadow = context.createlineargradient (0, -50, 0, 0);

// O ponto de partida do gradiente de projeção é preto com uma transparência de 50%

CanopShadow.addcolorstop (0, 'rgba (0, 0, 0, 0.5)');

// A direção é verticalmente para baixo e o gradiente muda rapidamente gradualmente para transparente completamente a uma distância muito curta, fora desse comprimento

// não há projeção no tronco da árvore

CanopShadow.addcolorstop (0,2, 'rgba (0, 0, 0, 0,0)'); </p> <p> // preencha o gradiente de projeção no tronco

context.fillstyle = CanopyShadow;

context.fillrect (-5, -50, 10, 50);

// Carregar a imagem

var de cascalho = novo imagem ();

Gravel.src = "Gravel.jpg";

Gravel.onload = function () {

drawtrails ();

} </p> <p> // Substitua linhas grossas marrons por imagens de fundo

context.strokestyle = context.createpattern (cascalho, 'repetir');

context.LineWidth = 20;

context.stroke ();

O segundo parâmetro do contexto.CreatePattern é o marcador repetível e o valor apropriado pode ser selecionado na Tabela 2-1.

Contexto da função de escala.SCALE (x, y): x, y representa os valores nas duas dimensões de x e y, respectivamente. Quando cada parâmetro exibe uma imagem, ele passa a ela a quantidade da imagem a ser ampliada (ou reduzida) no eixo dessa direção. Se o valor X for 2, significa que todos os elementos na imagem desenhada se tornarão duas vezes maiores. Se o valor Y for 0,5, a imagem desenhada se tornará metade da altura.

// desenha a primeira árvore em x = 130, y = 250

context.Save ();

context.Translate (130, 250);

drawtree (contexto);

context.restore (); </p> <p> // desenha a segunda árvore em x = 260, y = 500

context.Save ();

context.Translate (260, 500); </p> <p> // zoom na altura e largura da segunda árvore para o dobro do original

Context.Scale (2, 2);

drawtree (contexto);

context.restore ();

Gire a imagem

context.Save ();

// Os parâmetros do ângulo de rotação estão em radianos como unidades

context.rotate (1.57);

context.Drawimage (Myimage, 0, 0, 100, 100); </p> <p> context.restore ();

Um método de usar a transformação

// Salve o status atual

context.Save (); </p> <p> // O valor x aumenta à medida que o valor Y aumenta. Com a ajuda de uma transformação de tração,

// pode criar uma árvore inclinada usada como sombra

// Depois que a transformação é aplicada, todas as coordenadas são multiplicadas com a matriz

context.Transform (1, 0,

-0,5, 1,

, 0); </p> <p> // Na direção do eixo y, altere a altura da sombra para 60%

Context.Scale (1, 0,6); </p> <p> // enche o porta

context.fillstyle = 'rgba (0, 0, 0, 0.2)';

context.fillRect (-5, -50, 10, 50); </p> <p> // repintar a árvore com o efeito de sombra existente

createCanopypath (contexto);

context.fill (); </p> <p> // restaurar o estado de tela anterior

context.restore ();

Context.FillText (texto, x, y, maxwidth): conteúdo de texto de texto, x, y Especifica a posição do texto, MaxWidth é um parâmetro opcional, limita a posição do texto.

context.strokeText (texto, x, y, maxwidth): conteúdo de texto de texto, x, y especifica a posição do texto, maxwidth é um parâmetro opcional, limita a posição do texto.

// Desenhe texto em tela

context.Save (); </p> <p> // O tamanho da fonte é 60, a fonte é o impacto

Context.Font = "60px Impact"; </p> <p> // preencher a cor

context.fillstyle = '#996600';

//Centro

Context.TexTalign = 'Center'; </p> <p> // Desenhe texto

Context.FillText ('Happy Trails!', 200, 60, 400);

context.restore ();

Sombras podem ser controladas através de várias propriedades de contexto global

// cor preta, 20% de transparência

context.shadowcolor = 'rgba (0, 0, 0, 0.2)'; </p> <p> // mova 15px para a direita e 10px para a esquerda

context.shadowoffsetx = 15;

context.shadowoffsety = -10; </p> <p> // sombra ligeiramente turva

context.shadowblur = 2;

context.getImagedata (sx, sy, sw, sh): sx, xy determina um ponto, sw: largura, sh: altura.

Esta função retorna três propriedades: largura quantos pixels por altura de linha quantos pixels por coluna

Dados um monte de matrizes contendo os valores de RGBA (valores de vermelho, verde, azul e transparência) de cada pixel obtido da tela.

Context.putImagedata (Imagagata, DX, DY): permite que os desenvolvedores passem um conjunto de dados de imagem. DX, DY é usado para especificar o deslocamento. Se usado, a função saltará para a posição de tela especificada para atualizar

Exibe dados de pixels recebidos.

Canvas.todataurl: Os dados apresentados atualmente na tela podem ser obtidos programaticamente. Os dados obtidos são salvos no formato de texto e o navegador pode analisá -los em uma imagem.