I want to color a specific region of the canvas ,like a map with a specific color. I don’t want it to draw all at once ,but instead i want it to draw in an animating manner.
Please see this link : http://www.lovelljohns.com/publishing/intro2.html
Here when we drag and drop the continent item into the correct region it will simulate drawing with a sketch.
How can i acheive such functionality.
Is this application can be done using cocos2d-html5.
What is the best html5 library out there to use for the above application, which is free and easy to use. I have tried some basics with RaphaelJS but don’t know whether it will be ok .
Of course you can do the same thing with Cocos2d-html5, but the approach is pretty much about the imagination rather than technique.
What I can imagine is : the drawing with a sketch effect can be done using CCClippingNode which permit you show only some range of an image, by increasing the stencil of clipping node, you can simulate the drawing process.
As for the ocean fill effect, you can use CCClippingNode to limit the contour of the ocean, and then use CCAction to scale up a colored image from small size to big size to fit the contour.
There must be many approach much more imaginative than mine, so hope you find something suitable for your need.
To simulate drawing action, use ClippingNode + render-texture,
with render-texture, you draw brushes to the render-texture, which will then act as the mask for clipping node
