 |
|
||||
 Código-Fonte Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimentoDiga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais |
|||||
Você está aqui: HTML5 ::: HTML5 + JavaScript ::: Animação, Animações, Técnicas de Animação |
||||
Como criar um relógio digital usando o Canvas do HTML5 e as funções fillText() e requestAnimationFrame()Quantidade de visualizações: 745 vezes |
||||
|
Nesta dica nós vamos avançar um pouco mais no nosso Curso de Criação de Jogos em HTML5. Para isso nós vamos tirar proveito das funções fillText() e requestAnimationFrame() para criar um relógio digital na superfície do Canvas. Este relógio atualiza o tempo todo, mostrando as horas em tempo real. Comece analisando a imagem a seguir:  Agora vamos ao código. Veja a página HTML completa, incluindo o código JavaScript para a animação:
Para obter as horas formatadas de acordo com as configurações regionais do nosso computador nós fazemos uso da função toLocaleTimeString() do objeto Date. Note o uso da função clearRect() para limpar o Canvas. Em seguida nós definimos a fonte e a cor a ser usada no texto usando as propriedades font e fillStyle. Finalmente nós usamos a função fillText() para escrever o texto representando a hora atualizada na superfície do Canvas. Para finalizar, nós usamos a função requestAnimationFrame() para atualizar a janela de desenho constantemente, na taxa de 60 frames por segundo. Em outras dicas de HTML5 eu mostro como você pode controlar essa taxa de atualização. |
||||
 Link para compartilhar na Internet ou com seus amigos: |
||||
HTML5 ::: HTML5 + JavaScript ::: Canvas |
||||||||
Programação gráfica para iniciantes - Como desenhar círculos com ou sem preenchimento usando o método arc() do objeto Canvas do HTML5Quantidade de visualizações: 6531 vezes |
||||||||
Podemos usar o método arc() do objeto Canvas do HTML5 para desenhar círculos com ou sem prenchimento. Veja nos exemplos abaixo como isso pode ser feito. Primeiro um círculo sem preenchimento:
Ao abrir esta página HTML nós teremos o seguinte resultado:  E agora um círculo preenchido:
Ao abrir esta página HTML nós teremos o seguinte resultado:  | ||||||||
HTML5 ::: Canvas Element ::: Linhas |
||||||||
Computação gráfica usando HTML 5 - Como usar o método lineTo() do objeto Canvas do HTML5 para desenhar retasQuantidade de visualizações: 2727 vezes |
||||||||
|
O método lineTo() do objeto Canvas do HTML5 nos permite desenhar linhas retas entre um ponto x e um ponto y. Para isso, usamos o método moveTo() para mover a caneta (ou pena) de desenho para um coordenada x, y e a partir deste ponto nós especificamos as coordenadas x, y para a outra extremidade da linha. O trecho de código a seguir desenha uma linha saindo das coordenadas x = 20, y = 20 e chegando até x = 300, y = 150. Veja:
E aqui estão os códigos HTML e JavaScript para o exemplo completo:
Ao abrir esta página HTML nós teremos o seguinte resultado:  | ||||||||
HTML5 ::: HTML5 + JavaScript ::: Canvas |
||||||||||||||||
Como carregar uma imagem (ou foto) no objeto Canvas do HTML5Quantidade de visualizações: 2339 vezes |
||||||||||||||||
O objeto Canvas do HTML5 nos permite carregar uma imagem ou foto em tempo de execução e desenhá-la em sua superfície. Para isso, comece criando um objeto Image para guardar a imagem temporariamente na memória:
O passo seguinte é adicionar um "ouvidor" de evento neste objeto Image para que ele nos avise quando a imagem estiver 100% carregada. Veja:
Pronto! Veja que agora, quando o evento load do objeto Image disparar, a função desenharImagem será chamada e a imagem será então desenhada no Canvas. Veja:
E aqui está o código completo para o exemplo:
Ao executar a página nós teremos o seguinte resultado:  | ||||||||||||||||
Veja mais Dicas e truques de HTML5 |
Dicas e truques de outras linguagens |
|
Python - Como converter Centímetros Cúbicos em Metros Cúbicos em Python - Python para Física e Engenharia C - Exercício Resolvido de C - Como ler um número inteiro e imprimir seu sucessor e seu antecessor em C |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
