The Collie.js JavaScript library allows us to create simple 2D graphics animations. The Collie.js library indirectly uses HTML5 canvas based graphics capabilities.
The following code sample shows how simple it is to use this library. The animation uses a simple image file.
<!DOCTYPE html>
<html>
<head>
<title>collie.js demo</title>
<script type="text/javascript" src="http://jindo.dev.naver.com/collie/deploy/collie.min.js"></script>
</head>
<body>
<div id="drawingarea"></div>
<div id="anotherarea"></div>
<script type="text/javascript">
collie.ImageManager.add({
"android" : "androidlogo.png"
});
var layer = new collie.Layer({
width : 600,
height : 480
});
var item = new collie.DisplayObject({
x : "center",
y : "center",
velocityRotate : 20,
backgroundImage : "android"
});
item.addTo(layer);
collie.Renderer.addLayer(layer);
collie.Renderer.load(document.getElementById("drawingarea"));
collie.Renderer.start();
</script>
</body>
</html>
The following video clip goes over this code sample, shows its execution and explains it.
You can find more video clips and code samples for learning how to use this JavaScript library in my free courses website at http://abelski.lifemichael.com.
