0

I am trying to create a similar effect as seen here:

http://timothypoon.com/blog/2011/01/19/html5-canvas-particle-animation/

However, I can't seem to get this to work on my page and I would like to apply this effect in a div that contains an image. Is this possible or does everything have to happen on the canvas?

When I try to recreate the effect described in the tutorial I get lots of errors such as variables not being defined etc.

imperium2335
  • 23,402
  • 38
  • 111
  • 190

2 Answers2

0

You could re-create this using Canvas, or using CSS transformations and shadows, or a mixture of the two. As for the undefined variables, I can't help as you've not posted your code.

A clean approach would be to do everything within the canvas, using JavaScript. You can draw both the foreground grass, and background mountains to the canvas. However if you want to partly use a <div>, you can overlay the div on top of the canvas using CSS position:fixed or position:absolute, also using CSS z-index to set their order.

I recommend the following link, scroll down for the image drawing: http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/

I don't know how else I can help, as the tutorial that you've provided explains everything quite well. But if you've got any further queries, feel free to comment, or update your question.

Jack
  • 15,614
  • 19
  • 67
  • 92
0

You can use the proton particle engine easily achieve the effect you want, Its API is very simple.http://a-jie.github.io/Proton/

jsgit
  • 9
  • 2