Como incluir imagens em seu Web page com tela HTML5

Enquanto HTML há muito tempo tem suporte para imagens, as lona

interface HTML5 acrescenta nova vida às imagens da Web. As imagens podem ser exibidas dentro de uma tela, onde eles podem ser integrados com as técnicas de desenho vetorial do API lona. Você também pode selecionar uma parte de uma imagem a ser exibida, e aplicar várias transformações para a sua imagem para criar composições interessantes e animações.

Esta figura mostra uma imagem desenhada por duas vezes sobre um elemento de tela.

image0.jpg

Desenhar uma imagem na tela HTML5

A maneira mais fácil de usar uma imagem em um elemento de tela é usar uma imagem já disponível na página Web. Você pode colocar uma imagem na página com o comum marcar e utilizar o CSS display: none governar para tornar a imagem invisível. Uma abordagem alternativa é a de criar um Imagem objeto em javascript e aplicar o src atributo para conectar essa imagem para um arquivo de imagem específico. Para exemplos de ambas as técnicas, considere o seguinte código HTML:

Canvas não suportada

O seguinte código javascript exibe a imagem na tela:

 função draw () {var desenho = document.getElementById ( "desenho") - var con = drawing.getContext ( "2d") - var goofyPic = document.getElementById ( "goofyPic") - con.drawImage (goofyPic, 0, 0 , 50, 50) image2 -var = new imagem () - image2.src = "andyGoofy.gif" -con.drawImage (image2, 100, 100, 70, 50) -} // sorteio final

Aqui está como fazê-lo:

  1. Criar a imagem na página principal.

    A maneira mais fácil de acessar uma imagem é usar HTML comum para incorporar a imagem na página principal. Se você quiser, você pode ocultar o etiqueta com código de CSS (display: none) de modo que apenas a versão na tela é visível.

  2. Criar uma variável javascript para a imagem com o document.getElementById () mecanismo.

  3. Desenhar a imagem na tela com o drawImage () função.

    O primeiro dos cinco parâmetros é o nome de um objecto imagem. (Deve ser o nome de um objeto de imagem javascript, não apenas o nome de uma imagem de arquivo.) Os próximos dois parâmetros são os valores de X e Y do canto superior esquerdo da imagem, e os dois últimos parâmetros são do tamanho da imagem (largura e altura).

  4. Criar um javascript Imagemobjeto.

    Se você não quiser inserir uma imagem na página, você pode usar javascript para criar uma imagem de forma dinâmica. Use o nova imagem() construtor para construir uma nova imagem.

  5. Alterar a imagem de srcpropriedade.

    Se você criar uma imagem de javascript, você deve especificar o src atributo para indicar o arquivo associado com a imagem. Pode levar algum tempo para a imagem para carregar.

A imagem não será exibida até que tenha carregado a partir do servidor. Na maioria dos casos, isso não será um problema, mas às vezes você precisa atrasar o seu programa até que a imagem tenha terminado de carregar. o Imagem tem um objeto carregando propriedade que aceita uma função de retorno. Use esta técnica para esperar até seu desenho acabamentos:

image.onload = finishDrawing-função finishDrawing () {// resto do desenho de código vai aqui}

Desenho parte de uma imagem na tela HTML5

Às vezes, você quer desenhar uma pequena parte da imagem original. Um programa que se concentra no no centro da face pateta parece com isso:

image1.jpg

É muito fácil para desenhar parte de uma imagem. Use o mesmo drawImage () comando, mas desta vez use uma versão com nove parâmetros:

con.drawImage (goofyPic, 60, 70, 90, 90, 0, 0, 150, 150) -

Aqui está o que todos estes parâmetros dizer:

  • Nome Image: O primeiro parâmetro é o objeto de imagem (não o nome do arquivo, mas o nome do javascript Imagem objeto).

  • esquina da fonte canto superior esquerdo: A primeira tarefa é escolher a parte da imagem original a ser exibido. Os próximos dois parâmetros indicam o canto superior esquerdo de uma seleção na imagem original. (Você pode usar um editor de imagem como o Gimp ou IrfanView para determinar a posição e tamanho da seleção.)

  • Altura e largura da fonte: Os próximos dois parâmetros indicam a altura ea largura da seleção de origem.

  • Posição de destino: Os próximos dois parâmetros são a posição do canto superior esquerdo da imagem na tela.

  • Tamanho de destino: Os dois últimos parâmetros descrevem a altura ea largura da imagem de destino na tela.

A técnica de sub-imagem descrito aqui é bastante útil porque permite combinar várias imagens em uma única imagem (muitas vezes chamado de folha de sprite). Isto diminui a sobrecarga para entregar a imagem. (Uma grande imagem é mais rápido para entregar do que vários pequenos.) Ele também é usado com freqüência em jogos e animações em que uma entidade pode ter várias imagens exibidas em seqüência para sugerir a pé ou de atacar.

Semelhante

menu