Canvas or PNG? (for html5 animation)

Question

I'm going to develop an html5 rich animation. I've already design the components in Illustrator, but now the question is how to export this components? via Canvas object? or via Image(png)? .

Notice that the components may have some changes(like a flower who get an wings at some point)..

1. Canvas it will able me easily add and remove this additions, But with Image I should make them absolute with z-index..
2. Image will prevnt copying my components without permission(at least it prevent anybody take them as vector image).. so it really advantage.

Thanks!, ~ Almog Baku

Answer 1

If you want something fast, with lot of sprites and direct interaction, that's a no-brainer : use canvas.

This API is very similar to the one of most 2D graphical API in other languages and enables "direct" drawing and composition.

Using the html engine to compose and redraw things is very ineffective as soon as you have a lot of objects and transformations.

Answer 2

because Illustrator is a vector application you might want to look into the SVG format which is supported by most HTML5 browsers.

You can get Illustrator HTML5 SVG pack here , and an explanation here .

Answer 3

如果您使用svg，请检出Raphaeljs库，它使从javascript处理svg更加容易

Answer 4

I found out that the easiest and powerfull way to deal with building rich animations(short film) for web is using both JS and css animations/transictions ..

Building it with sass+compass make it easily and powerfull as well..

Why? and about my research

Actually I was built this same animation-film twice and half:
first I built the whole film with jQuery only(wich was really slow, clumsy, and hard-to-build).
Than, I give a try for canvas.. but I found out that it very hard to create some common transictions like slide-up and much more. So, I try to implement it using some common canvas libraries.. and gave up after some time(1/5 completed of the film).
Than I choose to implement it from scratch using compass+sass and CSS ANIMATIONS/TRANSICTIONS, and I found out that it the most powerfull, easy way to solve, and fast development to deal with this issue.

I was implement every "slide" within css animations who detected by css class. and determinate the end of every slide using JS who listen to the css animation event..