Tela HTML5, um tutorial para iniciantes

A especificação HTML5 introduz muitos novos recursos, um dos mais empolgantes é o elemento de tela. A tela HTML 5 fornece uma maneira de desenhar gráficos através do JavaScript, que é simples de usar, mas poderoso. Cada elemento de tela tem um contexto (contexto) (pense em uma página em uma prancheta) onde qualquer forma pode ser desenhada. O navegador suporta vários contextos de lona e fornece recursos de desenho gráfico através de diferentes APIs. A maioria dos navegadores suporta contextos de tela 2D - incluindo ópera, Firefox, KonQueror e Safari. Além disso, algumas versões da Opera também suportam tela 3D, e o Firefox também pode suportar tela 3D através de plug-ins.

Este artigo apresenta o básico da tela 2D e como usar funções básicas de tela, como linhas, formas, imagens e texto. Para entender este artigo, é melhor você entender o básico do JavaScript.

Você pode clicar aqui para baixar o código de exemplo neste artigo em lotes

básico de tela:

O método para criar tela é simples, você só precisa adicionar o elemento <Canvas> à página HTML:

<canvas id = myCanvas width = 300 altura = 150>

Conteúdo de fallback, caso o navegador não suporta tela.

</canvas>

Para fazer referência a elementos no JavaScript, é melhor definir o ID do elemento; Você também precisa definir a altura e a largura da tela.

Depois que a tela for criada, vamos preparar o pincel. Para desenhar um gráfico em uma tela, você precisa usar o JavaScript. Primeiro, encontre o elemento Canvas através da função GetElementById e, em seguida, inicialize o contexto. Vários gráficos podem ser desenhados usando a API de contexto. O script a seguir desenha um retângulo na tela (clique aqui para ver o efeito):

// Obtenha uma referência ao elemento.

var elem = document.getElementById ('mycanvas');

// Sempre verifique propriedades e métodos, para garantir que seu código não quebre

// em outros navegadores.

if (elem && elem.getContext) {

// Obtenha o contexto 2D.

// Lembre -se: você pode inicializar apenas um contexto por elemento.

var context = elem.getContext ('2d');

if (context) {

// você terminou! Agora você pode desenhar seu primeiro retângulo.

// Você só precisa fornecer as coordenadas (x, y), seguidas pela largura e

// Dimensões de altura.

context.fillRect (0, 0, 150, 100);

}

}

Você pode colocar o código acima na parte da cabeça do documento ou em um arquivo externo.

API de contexto 2D:

Depois de introduzir como criar tela, vamos dar uma olhada na API de tela 2D para ver o que pode ser feito com essas funções.

Linhas básicas:

O exemplo acima mostra como é fácil desenhar um retângulo.

As propriedades de FillStyle e Strokestyle podem ser facilmente definidas para preenchimento e linhas de retângulo. O valor da cor é usado da mesma forma que CSS: número hexadecimal, rgb (), rgba () e hsla. O Fillrect pode ser usado para desenhar um retângulo com o preenchimento. Use o Strokerect para desenhar retângulos apenas com bordas e sem preenchimento. Se você deseja limpar algumas lonvas, pode usar o ClearRect. Os parâmetros dos três métodos acima são os mesmos: x, y, largura, altura. Os dois primeiros parâmetros definem as coordenadas (x, y) e os dois últimos parâmetros definem a altura e a largura do retângulo. Você pode usar a propriedade de largura de linha para alterar a espessura da linha. Vejamos os exemplos usando Fillrect, Strokerect ClearRect e outros:

context.fillstyle = '#00f'; // azul

context.strokestyle = '#f00'; // vermelho

context.LineWidth = 4;

// desenha alguns retângulos.

context.fillRect (0, 0, 150, 50);

context.Strokereect (0, 60, 150, 50);

context.clearrect (30, 25, 90, 60);

context.Strokerect (30, 25, 90, 60);

Este exemplo de renderização é mostrado na figura a seguir:

caminho:

Formas arbitrárias podem ser desenhadas através do caminho da tela (caminho). Você pode desenhar o contorno primeiro, depois desenhar a borda e preencher. Criar uma forma personalizada é simples, comece a desenhar com BeginPath () e, em seguida, desenhe sua figura com linhas retas, curvas e outros gráficos. Após o desenho, chame preenchimento e golpe para adicionar bordas de preenchimento ou definição. Ligue para ClosePath () para encerrar o desenho gráfico personalizado. Aqui está um exemplo de desenhar um triângulo:

// Defina as propriedades do estilo.

context.fillstyle = '#00f';

context.strokestyle = '#f00';

context.LineWidth = 4;

context.BeginPath ();

// Comece a partir do ponto superior.

context.moveto (10, 10); // Dê as coordenadas (x, y)

context.lineto (100, 10);

context.lineto (10, 100);

context.lineto (10, 10);

// Feito! Agora preencha a forma e desenhe o golpe.

// Nota: Sua forma não será visível até que você ligue para qualquer um dos dois métodos.

context.fill ();

context.stroke ();

context.ClosePath ();

As renderizações são mostradas na figura a seguir:

Outro exemplo mais complexo usa linhas retas, curvas e arcos.

Insira a imagem:

O método DrawImage permite a inserção de outras imagens (elementos IMG e Canvas) na tela. Na Opera, você pode desenhar gráficos SVG em tela. Este método é mais complicado e pode ter 3, 5 ou 9 parâmetros

3 parâmetros: o método mais básico de usar o drawimage. Um parâmetro especifica a posição da imagem e os outros dois parâmetros especifica a posição da imagem em tela.

5 Parâmetros: Método de uso intermediário de drawimage, incluindo os 3 parâmetros mencionados acima, adicione dois parâmetros para indicar a largura e a altura da imagem de inserção (se você deseja alterar o tamanho da imagem).

9 Parâmetros: o mais complexo DrawImage é um método de uso misto, incluindo os 5 parâmetros acima, e os outros 4 parâmetros definem a posição e a largura da altura na imagem de origem. Esses parâmetros permitem cortar dinamicamente a imagem de origem antes de exibi -la.

Aqui estão três exemplos dos métodos de uso acima:

// Três argumentos: o elemento, destino (x, y) coordenadas.

context.drawimage (img_elem, dx, dy);

// Cinco argumentos: o elemento, o destino (x, y) coordenadas e o destino

// Largura e altura (se você deseja redimensionar a imagem de origem).

context.Drawimage (img_elem, dx, dy, dw, dh);

// Nove argumentos: o elemento, as coordenadas de origem (x, y), largura da fonte e

// altura (para corte), coordenadas de destino (x, y) e largura de destino

// e altura (redimensionar).

context.Drawimage (img_elem, sx, sy, sw, sh, dx, dy, dw, dh);

O efeito é mostrado na figura abaixo:

Operação no nível do pixel:

A API de contexto 2D fornece três métodos para operações de nível de pixel: CreateImagedata, GetImagedata e PutImagedata. O objeto IMAGEDATA salva o valor de pixel da imagem. Cada objeto possui três propriedades: largura, altura e dados. O tipo de atributo de dados é o CanvaspixElArray, que é usado para armazenar largura*altura*4 valores de pixels. Cada pixel possui um valor RGB e um valor alfa de transparência (seus valores são de 0 a 255, incluindo alfa!). A ordem dos pixels é armazenada da esquerda para a direita, de cima para baixo, por linha. Para entender melhor seu princípio, vejamos um exemplo - desenhe um retângulo vermelho:

// Crie um objeto IMAGEDATA.

var iMgd = context.createImagedata (50,50);

var pix = imgd.data;

// Faça um loop sobre cada pixel e defina um vermelho transparente.

for (var i = 0; n = pix.Length, i <n; i += 4) {

pix [i] = 255; // canal vermelho

pix [i+3] = 127; // canal alfa

}

// Desenhe o objeto IMAGEDATA nas coordenadas (x, y) fornecidas.

context.putImagedata (imgd, 0,0);

NOTA: Nem todos os navegadores implementam CreateImagedata. Nos navegadores suportados, o objeto IMagedata precisa ser obtido através do método getImagedata. Consulte o código de exemplo.

O IMAGEDATA pode ser usado para concluir muitas funções. Por exemplo, filtros de imagem podem ser implementados ou visualizações matemáticas podem ser implementadas (como fractais e outros efeitos especiais). Os seguintes efeitos especiais implementam um filtro de inversão de cores simples:

// Obtenha o CanvaspixElArray das coordenadas e dimensões dadas.

var iMgd = context.getImagedata (x, y, largura, altura);

var pix = imgd.data;

// Faça um loop sobre cada pixel e inverta a cor.

for (var i = 0, n = pix.length; i <n; i += 4) {

pix [i] = 255 - pix [i]; // vermelho

pix [i+1] = 255 - pix [i+1]; // verde

pix [i+2] = 255 - pix [i+2]; // azul

// i+3 é alfa (o quarto elemento)

}

// Desenhe o IMAGEDATA nas coordenadas dadas (x, y).

context.putImagedata (imgd, x, y);

A figura a seguir mostra o efeito após o uso deste filtro:

Palavra:

Embora a recente versão do Webkit e Firefox 3.1 Nightly Build tenham começado a apoiar a API de texto, a fim de garantir a integridade do artigo, decidi ainda apresentar a API de texto aqui.

As seguintes propriedades de texto podem ser definidas no objeto de contexto:

Fonte: Fonte de texto, o mesmo que o atributo CSSFONT-Family

Textalign: Alinhamento horizontal de texto. Valores de atributo desejáveis: Iniciar, final, esquerda, direita, centro. Valor padrão: Iniciar.

TEXTBASELINE: Alinhamento vertical do texto. Valores de atributos desejáveis: topo, suspenso, médio, alfabético, ideográfico, inferior. Valor padrão: alfabético

Existem duas maneiras de desenhar texto: FillText e StroKetext. O primeiro desenha texto com enchimento de enchimento, o último desenha texto apenas com a fronteira de Strokestyle. Os parâmetros de ambos são os mesmos: o texto a ser desenhado e a posição (x, y) coordenadas do texto. Há também uma opção opcional - largura máxima. Se necessário, o navegador reduz o texto para ajustar a largura especificada. O atributo de alinhamento do texto afeta a posição relativa do texto nas coordenadas do conjunto (x, y).

Aqui está um exemplo de desenho de hello world text em tela:

context.fillstyle = '#00f';

context.font = 'itálico 30px sem serrif';

context.TextBaseline = 'top';

context.fillText ('Olá mundo!', 0, 0);

context.font = 'Bold 30px sans-serif';

context.strokeText ('Hello World!', 0, 50);

A imagem a seguir é sua renderização:

sombra:

Atualmente, apenas KonQueror e Firefox 3.1 Build Nightly suportam a API das sombras. As propriedades da API são:

ShadowColor: Shadow Color. Seu valor é consistente com o valor da cor CSS.

Shadowblur: define o grau de Shadow Blur. Quanto maior esse valor, mais embaçado a sombra. Seu efeito é o mesmo que o filtro difuso gaussiano do Photoshop.

Shadowoffsetx e ShadofOffsety: os compensações X e Y da sombra, em pixels.

Aqui está um exemplo da sombra da tela:

context.shadowoffsetx = 5;

context.shadowoffsety = 5;

context.shadowblur = 4;

context.shadowcolor = 'rgba (255, 0, 0, 0,5)';

context.fillstyle = '#00f';

context.fillrect (20, 20, 150, 100);

O efeito é mostrado na figura abaixo:

Gradiente de cores:

Além das cores do CSS, as propriedades de FillStyle e Strokestyle podem ser definidas como objetos de graduação. -Folour Gradientes podem ser usados ​​para linhas e preenchimentos via Canvas Gradient. Para criar um objeto Canvas Gradiente, você pode usar dois métodos: CreateLinearGradient e CreaterRadialGradient. O primeiro cria um gradiente de cores linear, e o último cria um gradiente de cores circulares. Depois de criar um objeto de gradiente de cores, você pode usar o método AddColorStop do objeto para adicionar valores intermediários em cores. O código a seguir demonstra como usar gradientes de cores:

// você precisa fornecer as coordenadas de origem e destino (x, y)

// para o gradiente (de onde ele começa e onde termina).

var gradiente1 = context.createlineargradiente (SX, SY, DX, DY);

// Agora você pode adicionar cores no seu gradiente.

// O primeiro argumento informa a posição da cor em seu gradiente. O

// O intervalo de valor aceito é de 0 (Início do gradiente) a 1 (extremidade do gradiente).

// O segundo argumento informa a cor que você deseja, usando o formato de cor CSS.

gradiente1.addcolorstop (0, '#f00'); // vermelho

gradiente1.addcolorstop (0,5, '#ff0'); // amarelo

gradiente1.addcolorstop (1, '#00f'); // azul

// Para o gradiente radial, você também precisa fornecer fonte

// e raio do círculo de destino.

// As coordenadas (x, y) definem os pontos centrais do círculo (Iniciar e

// destino).

var gradiente2 = context.CreamRadialGradient (SX, SY, SR, DX, DY, DR);

// Adicionar cores a um gradiente radial é o mesmo que adicionar cores ao linear

// gradientes.

Também preparei um exemplo mais complexo usando gradientes de cores lineares, sombras e texto.

O efeito é mostrado na figura abaixo:

Demonstração de lona:

Se você quiser saber o que pode fazer com a tela, consulte o seguinte projeto:

Widget de ópera:

Simaquarium

Caderno de desenho do artista

Espirógrafo

Engenharia e demonstração on -line:

Newton Polinomial

Canvascape - Walker 3D

Paint.Web - Demoção de pintura, código aberto

Voo de campo de estrela

Blob interativo

Subseção:

O Canvas é um dos recursos mais esperados do HTML 5 e atualmente é suportado pela maioria dos navegadores da Web. A tela pode ajudar a criar jogos e aprimorar as interfaces gráficas do usuário. Contexto 2D

A API fornece muitos recursos de desenho de gráficos - espero que você tenha aprendido sobre o uso da tela através deste artigo e esteja interessado em aprender mais!