Criando um relógio no estilo iOS usando o canvas

O canvas é um recurso nativo do HTML5. Ele permite criar uma área dentro da página do site onde é possível desenhar e animar objetos através de programação. Você já deve ter visto alguns exemplos nos doodles do Google, como estes aqui: 151 anos de Debussy e este game que simula uma máquina de Turing.

Veja algumas aplicações do canvas:

Animação:

http://www.thewildernessdowntown.com

Detecção do movimento do mouse:

http://dan.forys.co.uk/experiments/mesmerizer

Manipulação de imagem (clique para explodir a imagem):

http://craftymind.com/factory/html5video/CanvasVideo.html

Como uma ferramenta de desenho:

https://developer.mozilla.org/en-US/demos/detail/ghostwriter-art-studio/launch

Nosso objetivo será construir um relógio no estilo iOS, e ao fim deste post o resultado final será este:

See the Pen vKcrh by Opera House (@operahouse) on CodePen

Origem

O canvas foi inicialmente desenvolvido pela Apple em 2004, como parte de seu WebKit para permitir animações no Dashboard do Mac OS e no navegador Safari. O canvas foi depois adotado em outros navegadores e finalmente foi proposta sua inclusão na especificação HTML5.

O que é canvas ?

Canvas é um elemento HTML5 que suporta elementos gráficos 2D e 3D e possui suporte nos navegadores modernos como Chrome, Firefox, Safari, Opera e IE a partir da versão 9. Este elemento é destinado exclusivamente para desenho, criação e animações gráficas manipulado por linguagens de programação como a JavaScript. As animações neste novo elemento do HTML5 possuem melhor performance em relação a outras tecnologias antigas como Flash, além de serem visíveis no iPhone e iPad e smartphones com sistema Android.

Como utilizar o canvas ?

Implementar o canvas é bem simples:

crie um documento HTML
defina a tag canvas dentro do body do documento:

A especificação do canvas define os atributosÂ ID, WIDTH E HEIGHT para conter a identificação do elemento no documento e as propriedades de altura e largura da área de desenho.

Esses atributos podem ser inseridos no elemento canvas via HTML ou JavaScript. Para demarcar a área do canvas, você pode incluir uma borda, usando CSS. No código abaixo, estamos construindo um canvas de tamanho 200 x 200 píxels identificado como myCanvas e com uma borda preta:

Outro detalhe importante é que você pode escrever qualquer texto dentro da tag (por exemplo "Seu browser não suporta canvas do HTML5"). Se o navegador não possuir suporte para o canvas, o texto será exibido no lugar do canvas e não haverá um erro.

Continuando com o exemplo acima, depois de definir o elemento canvas, vamos selecionar o contexto do nosso canvas, agora utilizando Javascript:

Dessa maneira fica definido que iremos trabalhar com um contexto 2D.

Escrevendo textos com Canvas

É possível escrever texto com o canvas. No código abaixo, vamos escrever "Hello World" dentro do canvas.

Desenhando um círculo com Canvas

No código abaixo, vamos construir um círculo com raio de 70 píxels, usando os métodos beginPath() e arc(). Os métodos fill() e stroke() servirão para preencher o círculo e desenhar sua borda, com as cores escolhidas nas linhas anteriores.

No próximo post iremos iniciar a construção dos primeiros elementos de nosso relógio, aprender alguns conceitos de trigonometria e elaborar a lógica para posicionamento de nossos ponteiros e números, não perca essa oportunidade e confira no link abaixo.

INTRODUÇÃO AO CANVAS

PARTE 2: DESENHANDO OS ELEMENTOS DO RELÓGIO

PARTE 3: ADICIONANDO MOVIMENTO AOS PONTEIROS

PARTE 4: FINALIZANDO O PROJETO

Para ser informado sobre a publicação da continuação, siga-nos no Twitter

Para mais exemplos e tutoriais e aplicações do canvas em HTML5, confira algumas referências em Inglês muito boas, principalmente Html5 Canvas Tutoriais.

Referências :

http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction Html5 Canvas Tutoriais

http://www.w3schools.com/tags/ref_canvas.asp

http://www.script-tutorials.com/category/html5-2/