 |
|
Você está aqui: HTML5 ::: HTML5 + JavaScript ::: Animação, Animações, Técnicas de Animação |
|
Como movimentar uma bola na superfície do Canvas do HTML5 em determinados ângulosQuantidade de visualizações: 606 vezes |
|
|
Em dicas anteriores eu mostrei como podemos movimentar um objeto na superfície de desenho do Canvas do HTML5. Mostrei como animar uma bolinha na horizontal e depois na vertical. Agora veremos como movimentar a bola em um determinado ângulo, ou seja, 30 graus, 45 graus, 90 graus, etc. 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:
Execute a página e veja que a bolinha sai do centro e segue na direção nordeste com um ângulo de 30 graus. Experimente alterar o ângulo e a velocidade da bolinha para ver os resultados obtidos. Se você quiser a bolinha se movimentando para cima, forneça o ângulo de 90 graus. Para baixo você pode experimentar o ângulo de 270, e assim por diante. A função que converte de graus para radianos já está embutida no exemplo também, assim como a conversão de coordenadas polares para coordenadas cartesianas. Em outras dicas veremos como rebater uma bolinha na superfície do Canvas do HTML5 usando ângulos de reflexão. |
|
 Link para compartilhar na Internet ou com seus amigos: |
|
Veja mais Dicas e truques de HTML5 |
Dicas e truques de outras linguagens |
|
Delphi - Como calcular MDC em Delphi VisuAlg - Exercício Resolvido de VisuAlg - Um programa que lê três números inteiros e mostra o maior PHP - Datas e horas em PHP - Como subtrair horas de uma data usando a função mktime() da linguagem PHP |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
