Como incluir imagens em sua página da web com html5 canvas

Video: HTML Básico - Links e Imagens

Enquanto HTML há muito tempo tem suporte para imagens, as tela de pintura interface HTML5 acrescenta uma 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 para exibir, 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.

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 usar o CSS display: none governar para tornar a imagem invisível. Uma abordagem alternativa é a criação de um Imagem objeto em javascript e aplicar o src atribuir a conectar essa imagem para um arquivo de imagem específica. 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 sorteio () {var desenho = document.getElementById ("desenhando") Con -var = drawing.getContext ("2d") -var goofyPic = document.getElementById ("goofyPic") -con.drawImage (goofyPic, 0, 0, 50, 50) -var image2 = new Imagem () - image2.src = "andyGoofy.jpg"-con.drawImage (imagem2, 100, 100, 70, 50) -} // tração 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, 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 objeto de imagem. (Deve ser o nome de um objeto de imagem javascript, e não apenas o nome de um arquivo de imagem.) 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 deseja incorporar uma imagem na página, você pode usar javascript para criar uma imagem dinâmica. Use o nova imagem() construtor para construir uma nova imagem.

5. Mudar a imagem do 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 objecto tem um carregando propriedade que aceita uma função de chamada de retorno. Use esta técnica para esperar até seu desenho acabamentos:

image.onload = finishDrawing-função finishDrawing () {// resto do desenho 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:

É 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 da imagem: 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 (às vezes chamado de folha de sprite). Isso diminui a sobrecarga para a entrega da imagem. (Uma grande imagem é mais rápido para entregar do que vários pequenos.) 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 caminhar ou atacando.