How to put a gif with Canvas

Question

I\'m creating a game, and in my game, when the HERO stay near the MONSTER, a gif will be showed, to scare the player. But I have no idea how to do this. I tried to put PHP o

Answer 1

It is not possible to simply draw a .gif (animated!) on the element. You have two options.

a) you can append the HTML with a

to which you append the .gif (via node) and then layer the via z-Index and css top/left over the , at the correct position. It will mess up with mouse events eventually tho, which can be solved by event propagation. I would consider this a poor mans solution.

b) You need to learn how to animate stuff. Look up window.requestAnimationFrame method. Doing so will allow you to animate on the , which can emulate the .gif behavior you are looking for. It will however be a bit complex at your current level i think.

You can draw the .gif on the canvas like the above poster described. However, it will be 100 % static, like a .jpg or .png in that case, unless you manage to dissolve the .gif into its frames and still use the window.requestAnimationFrame method.

Basicly, if you want the animated behavior of a .gif, you will need to make major adjustments.

0 讨论(0)

查看其它6个回答

发布评论:

提交评论

---

•  加载中...