A JavaScript Animation Library for HTML5 Canvas.
Tested on Chrome/WebKit, looking good on Firefox 4.
Requires a browser with support for HTML5 Canvas and some ECMAScript 5 capabilities.
Some of the features:
- Use the Canvas drawing API with sprites and a scene graph.
- Event handling and dispatch for objects.
- Nodes maintain transforms, bounds, and other useful properties.
- A clean api with a focus on good JavaScript style.
- Influenced by ActionScript 3, jQuery, Node.js, and JSLint.
- Easy to add to an existing page element where Flash no longer displays.
- Integrated runtime information provided by Stats.js.
Basic build instructions (minified version with the Closure Compiler installed):
git clone git://github.com/billyist/doodle-js.git
./build/make-doodle => ./build/doodle.js
Debugging version (type-checking and some useful error messages):
./build/make-doodle -D => ./build/doodle-debug.js
For more options: ./build/make-doodle -h
Questions?
Mailing list: http://groups.google.com/group/doodlejs
Or, ask me on Twitter: http://twitter.com/billyist
From hello-world.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#display { width: 400px; height: 400px; }
</style>
</head>
<body>
<div id="display"></div>
<script src="./build/doodle.js"></script>
<script>
doodle.ready(function () {
var display = doodle.createDisplay('#display'),
text = doodle.createText("Hello, World!").appendTo(display);
//center text
text.x = display.width / 2;
text.y = display.height / 2;
//game loop
display.on('animationFrame', function () {
text.rotation += 4;
});
});
</script>
</body>
</html>