Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

156
Visualizações
Interactive animations on canvas

I work with nuxt 2. I really like the monster animation on the main screen of massivemonster.co . You can even interact with it just by clicking on it with your mouse. Can you please tell me how to create a canvas animation like this? Monster image

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

I do not know much about nuxt.js but can touch on html5's canvas, how it works generally and how animations work.

What is canvas about generally?

  1. The canvas element is basically, as the name suggests, a blank space... Like a painter's canvas:

  2. Through javascript you can write and draw things on the canvas (text, images, shapes, lines etc)

  3. To do this, which is an important aspect for interactive animations which we will touch in a bit, you specify the position on the canvas where you want to draw a specific thing.

How does canvas for animation work?

Now as discussed the canvas element out the box does not support animations (moving things). It supports still or motionless things (images, lines, text, etc) drawn on it. BUT what are animations? Animations are simply a group of images that are sequenced in such a way that the next image displays something (character, person, whatever) changing position just a little bit from the previous image. A flip book demonstrates this idea very well:

So to animate on the canvas you basically do the same thing. You would need to actually have a number of images (depending on the complexity of your animation it could be many) that represent the different stages of your monster moving. You'd then have to have some form of "tick" process (using setInterval for example) where you will draw the next image on the canvas. You may need to clear the canvas before drawing the next image. Or you may have a background image that stays constant so that on each "tick" you first draw the background image and then draw the next monster image.

Interacting with the monster/animated object

Canvas is not aware of the position of your monster after it draws it... So you'd have to actually have your own variable or monster object (javascript of course) that you use to track the current position of the object on the canvas. You can then use the mouse events to track the mouse so that when the mouse clicks on a position on the canvas that corresponds with where the animated object is (according to your monster variable data) you can then detect a mouse interaction with the monster and do whatever you want to do when that happens (maybe trigger a specific animation) etc

That in a nutshell, and over simplified, is what you'd have to do if you wanted to implement your own html5 based animations. But I'm sure there are some javascript libraries that you can find online that can assist with this. Have not looked into canvas animations in while.

Good luck!

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda