Como desenhar na sua página web com a tag html5

o tag configura uma parte da tela para ser usado como uma tela para gráficos programa controlados. código javascript executa todo o desenho e manipulação da imagem. O código a seguir configura um tela de pintura elemento e fornece um botão.

Este exemplo requer suporte HTML5 canvasclique em mim para ver um desenho

o tela de pintura elemento faz pouco por conta própria, você tem que usar javascript para extrair um contexto desenho (Um elemento especial que pode ser desenhado no) e utilizar os métodos de que objecto de contexto para criar gráficos dinâmicos. Por exemplo, para permitir que o desenhar()função quando o usuário clica no botão, use este código:

 tração função () {var myCanvas = document.getElementById ("myCanvas") = Contexto -var myCanvas.getContext ("2d") = -context.fillStyle "azul"-context.strokeStyle = "vermelho"-circle (contexto, 1, 1, 1) -para (i = 1 i lt; = 200- i + = 2) {círculo (contexto, i, i, i, "azul") -circle (contexto, 300-i, 200-i, i, "vermelho") -circle (contexto, 300-i, i, i, "azul") -circle (contexto, i, 200-i, i, "vermelho") -} // final para} // final drawfunction círculo (contexto, X, Y, o raio, cor) {context.strokeStyle = cor-context.beginPath () - context.arc (x, y, raio, 0, Math .PI * 2, verdadeiro) -context.stroke () -} // final do círculo

A saída deste tela de pintura código empate parece com isso:

A maioria dos navegadores modernos suportam alguma forma da tag canvas diretamente. No momento, apenas a um contexto de desenho em 2D está disponível, mas eventualmente você vai ser capaz de criar gráficos 3D diretamente no navegador.

o contexto objeto controla toda a funcionalidade desenho real. Alguns dos principais métodos da contexto objeto incluem:

• arco(): desenha uma arco (Porção de um círculo), como parte de um caminho. O arco é definido como um círculo, com um centro e um raio, mas também com início e ângulos terminando. Se os ângulos descrever um círculo completo (0 a 2 radianos pi vezes), o comando arc vai desenhar um círculo completo.

• BeginPath (): Começa a definição de um caminho. Normalmente, um caminho é definido por uma única mover para de comando, seguido por uma série de lineTo comandos, e terminado por um acidente vascular encefálico, closePath, ou encher.

• closePath (): Conecta o último ponto de um caminho (desenhado com mover para e lineTo comandos) para a primeira, a criação de uma forma fechada que pode ser preenchido.

• drawImage (): Permite desenhar uma imagem (a partir de um arquivo de imagem externo) na tela. Muitas implementações permitem a manipulação de nível de pixel, o que lhe permite aplicar filtros personalizados e transformações às suas imagens, o que permite muito mais controle do que o típico tag.

• 
  
  
  

  encher(): Este comando (e suas variantes, tais como fillRect) Permite que você aplique o estilo de preenchimento atual para elementos desenhados na tela.

• fillRect (): Constrói um retângulo de um tamanho e posição especificada, preenchido com o estilo de preenchimento atual.

• fillStyle (): Permite especificar o estilo de preenchimento. Este pode ser um valor de cor normal ou um gradiente predefinido.

• lineTo (): Juntamente com o moveTo de comando, o que lhe permite construir um caminho na tela. o lineTo comando leva um ponto de entrada e chama a partir de um ponto previamente definido para o ponto actual. Observe que o caminho não é exibido até que a aplicação do acidente vascular encefálico função.

• espessura da linha(): Isto define a largura da linha a ser puxado por um acidente vascular encefálico comando.

• mover para: Utilizado na definição do caminho para indicar o ponto de um caminho de partida.

• acidente vascular encefálico(): Desenha o caminho definido atualmente. Observa que os caminhos não são drawn- imediatamente o comando acidente vascular cerebral realmente desenha o caminho na tela.

• strokeRect (): Desenha um rectângulo não preenchida.

• strokeStyle (): Determina o estilo do próximo curso a ser desenhado. A maioria dos contextos de desenho apoiar estilos de traçado pontilhadas e tracejadas, mas mais são esperados.

• texto: Algumas implementações da tag canvas permitir a manipulação de texto. Este apoio é irregular, mas é provável que se torne comum em implementações futuras.

Video: O QUE SÃO TAGS EM HTML5? COMO USAR?

o tela de pintura tag é uma das mais importantes novidades do HTML5, pois permite o controle quase ilimitado de interface visual. Os desenvolvedores de jogos começaram a criar jogos online usando a tela, e já se tornou a base de diversas experiências de interface de usuário inovadoras (nomeadamente os mapas do Google).