HTML and CSS Reference
In-Depth Information
For designers and developers, the CreateJS framework, developed by Grant Skinner, provides a complete set of
JavaScript libraries for graphics, animation, sound, and preloading to assist in constructing HTML5 content.
EaselJS
EaselJS is a JavaScript library, part of CreateJS, that allows Flash designers and developers to create graphics in the
Flash authoring environment. Using EaselJS, you gain access to a bunch of similar syntax from Actionscript 3.0
while leveraging JavaScript for creating native browser graphics and animation. According to Grant Skinner, EaselJS
exercises the developments of ten-plus years of Flash's display list API; he wanted to port it over to a comprehensive
JavaScript library to be used for working with the
canvas
element in HTML5. In its syntax, EaselJS is very similar to
working with the display list API in ActionScript 3 (AS3), as Listing 4-3 demonstrates.
Listing 4-3.
An Example of EaselJS
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>EaselJS</title>
<script src="easeljs-0.4.2.min.js"></script>
<script src="BoxBlurFilter.js"></script>
<style>
* {background-color: #000;}
</style>
</head>
<body onLoad="init()">
<canvas id="canvas" width="1024" height="768"></canvas>
</body>
<script>
var stage,
canvas = document.getElementById("canvas"),
context = canvas.getContext("2D"),
logoImage = new Image(),
logo,
fps = 30,
speed = 0.2;
function init() {
stage = new Stage(canvas);
//Keep a local image or you'll get the following error:
//Unable to get image data from canvas because the canvas has been tainted by
cross-origin data.
logoImage.src = 'logo.jpg';
logoImage.onload = function () {
logo = new Bitmap(logoImage);
logo.cache(0, 0, logoImage.width, logoImage.height);
logo.regX = logo.image.width * 0.5;
logo.regY = logo.image.height * 0.5;
stage.addChild(logo);
