 |
|
||||
 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 mover uma bola na superfície do Canvas do HTML5 na horizontal - Para a direita, para a esquerda e rebatendoQuantidade de visualizações: 403 vezes |
||||||||||||
|
Nesta dica mostrarei uma técnica básica de animação em JavaScript. Para isso nós vamos usar o objeto Canvas do HTML5 e mover um desenho (uma bolinha) na horizontal. Primeiro vamos movimentá-la da esquerda para a direita, depois da direita para a esquerda e, finalmente, ela vai ficar rebatendo de um lado para o outro da tela. 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:
Veja que criamos uma variável chamada taxa_deslocamento que define a quantidade de pixel que o objeto será movido para a direita à cada vez que a função window.requestAnimationFrame() for chamada. Lembre-se de que, em geral, esta função é chamada 60 vezes por segundo (60 frames por segundo). Quanto maior o valor da variável taxa_deslocamento, mais rápido a bolinha se moverá pelo Canvas. A posição pos_y da bola é definida como 100 pixels e não sofrerá alteração, pois estamos movimento o objeto apenas na horizontal. A variável pos_x começa em 0 e é incrementada com o valor da variável taxa_deslocamento. Como estamos aumentando o valor da variável pos_x de forma positiva, a bola se movimentará para a direita. Note também o uso da função clearRect() do Canvas para limpar a superfície do elemento antes de desenharmos a bolinha novamente. Veja agora como podemos movimentar a bolinha da direita para a esquerda:
Veja que agora o valor da variável pos_x é ajustada inicialmente para a largura do Canvas. Então, dentro da chamada à função window.requestAnimationFrame() nós decrementamos o seu valor de acordo com o valor da variável taxa_deslocamento, que controla a velocidade do objeto. Para finalizar, veja o código HTML5 completo que aplica o efeito de rebater na bolinha, na horizontal, é claro:
Execute este exemplo e veja como a bolinha rebate ao chegar à margem direita ou esquerda do Canvas. O truque aqui foi multiplicar o valor da variável taxa_deslocamento por -1. Em outra dica veremos como movimentar a bola na vertical, ou seja, manipulando a variável y. |
||||||||||||
 Link para compartilhar na Internet ou com seus amigos: |
||||||||||||
HTML5 ::: HTML5 + JavaScript ::: Canvas |
||||||||||||
Como usar o método arc() do objeto Canvas do HTML5 para desenhar arcos, curvas e círculosQuantidade de visualizações: 4184 vezes |
||||||||||||
O método arc() do objeto Canvas do HTML5 nos permite criar figuras tais como arcos, curvas e círculos. Para isso é importante entender os seus parâmetros:arc(x, y, radius, ang1, ang2, direction); Os parâmetros x e y indicam as coordenadas do centro do círculo. O parâmetro radius indica o raio do círculo. Os parâmetros ang1 e ang2 indicam o ângulo inicial e o ângulo final. O parâmetro direction indica a direção do desenho. Se o valor true for informado, a direção será anti-horário. Se for false, o desenho será no sentido horário. É importante observar que os ângulos são medidos em radianos, não em graus. Assim, o ângulo 0 representa a posição 3 horas no relógio. A posição de 9 horas é (1 * PI), 12 horas é (1.5 * PI) e 6 horas é (0.5 * PI). Portanto, se você quiser desenhar um círculo completo, deverá sair do ângulo 0 e ir até (2 * PI). Veja um trecho de código que desenha um arco equivalente a um quarto de uma pizza, ou seja, 25%, saindo do ângulo 90º (em graus) e indo até 180º (graus):
Execute este código e veja que o arco realmente foi desenhado. Seu resultado deverá ser parecido com:  No entanto, para parecer um pedação de pizza, ou seja, o ponto de partida para um gráfico de pizza, é preciso que tenhamos duas linhas ligado esse arco ao centro do círculo. Veja a modificação que fiz:
Execute novamente e veja que agora o efeito ficou bem melhor. Seu resultado deverá ser parecido com:  Para finalizar, vamos colorir o pedação de pizza. Veja a nova versão (com o código completo):
Agora o resultado será:  | ||||||||||||
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 ::: Referência Tags/Elementos HTML5 ::: Tag/Elemento <Video> |
||||
Como usar a tag/elemento <video> do HTML5 em suas aplicações webQuantidade de visualizações: 1635 vezes |
||||
|
A tag/elemento <video> do HTML5 é usada quando queremos incorporar um vídeo em nossos documentos HTML sem incluir plugs adicionais, tais como o Flash Player. Contudo, o suporte a este elemento pode variar de navegador para navegador (faça testes com seus navegadores alvos antes). Em geral, navegadores que dão suporte ao elemento <video> suportam os seguintes formatos de vídeo: MP4, Ogg e WebM. Veja um documento HTML que carrega um vídeo MP4:
Quando você abrir esta página HTML, você verá um vídeo na tela já com os controles para iniciar, pausar, e parar a execução (contanto que você tenha informado um endereço válido para o vídeo). Note que não especificamos o tamanho do vídeo na página, o que fará com que o elemento <video> tenha as dimensões do vídeo que foi carregado. | ||||
Veja mais Dicas e truques de HTML5 |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
