Desenhe um retângulo básico com a Tag HTML5 Canvas

Para utilizar o lona tag disponível em HTML5, construir uma página web com um lona elemento nele. Normalmente, você fornece largura, altura, e identidade parâmetros para indicar quão grande é o cnavas é, assim:

Seu navegador não suporta a tag canvas ...

Dentro de lona tag, você pode colocar qualquer código HTML que você deseja. Este código será exibido se o navegador não suporte a lona tag. Normalmente, você acabou de colocar algum tipo de mensagem permitindo que o usuário sabe o que está faltando.

Nada de interessante acontece em uma tela sem algum tipo de código javascript. Muitas vezes, você vai usar uma função para desenhar na tela. Aqui está um desenhar() função, que é chamado pela onload corpo evento:

 draw function () {var canvas = document.getElementById ( "desenho") - se (canvas.getContext) {var con = canvas.getContext ( '2D') - con.fillStyle = "# FF0000" -con.fillRect (10 , 10, 50, 50) -} // fim do if} // sorteio final

o desenhar() função ilustra todas as principais idéias de trabalho com a tag canvas. Veja como você construir um desenho básico:

1. Criar uma referência variável para a tela.

   Use o padrão getElementById () mecanismo para criar uma variável referente à lona.

2. Extraia o contexto de elementos gráficos da tela.

   elementos de lona tem um contexto de elementos gráficos, que é um objeto especial que encapsula todos os métodos de desenho da tela pode executar. A maioria dos navegadores suportam um contexto 2D agora, mas contextos 3D são planejadas.

3. Definir o contexto de fillStyle, que indica como você vai enchido cor-in áreas (como retângulos).

   A abordagem básica é a de fornecer um valor de cor de estilo CSS.

4. Crie um retângulo preenchido.

   A forma de retângulo é muito fácil de construir. Espera-se quatro parâmetros: x, y, largura, e altura. o x e y parâmetros indicam a posição do canto superior esquerdo do rectângulo, e o largura e altura parâmetros indicam o tamanho do rectângulo. Todas as medidas em pixels.