A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/lamberta/doodle-js below:

lamberta/doodle-js: A JavaScript animation library for HTML5 Canvas.

This project is currently inactive, but feel free to fork and contribute.
I continue to reference the code in this project a lot, and in fact Doodle.js lead directly to the book Foundation HTML5 Animation with JavaScript, the examples can be found here: https://github.com/lamberta/html5-animation The difference being that the book does not use any external libraries, just JavaScript and the Canvas API, while Doodle.js implements some of the ActionScript API since I came over from the Flash world. Personally, I now just add these methods as needed instead of importing the entire library, but your preference my differ.
In summary, while the code here can be useful, if you are just beginning to animate with the canvas, I'd suggest you take a look at the examples in the html5-animation repo, and buy the book to get a better understanding how they work ;)

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:

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

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>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4