Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Working with HTML5 Canvas Elements using Easel.js
The popularity of HTML5 Canvas elements is well-known, as they allow web developers to create animations, full-fledged applications, and interactive charts. However, working with canvas can be challenging, especially for developers coming from a Flash animation background.
In this tutorial, we will explore the Easel.js library, which simplifies working with HTML5 Canvas elements. The syntax of Easel.js is similar to ActionScript and includes familiar features like Display List, Stage, and Graphics, making canvas development more accessible for Flash developers.
Installing Easel.js
The first step is to import Easel.js into your project. The easiest way is using the CDN link:
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
Key Features of Easel.js
Display List
The display list in EaselJS works similarly to ActionScript, allowing you to add and manage visual elements:
currentStage.addChild(myChild);
Mouse Events
Adding mouse event handlers is straightforward in Easel.js:
myChild.onPress = myFunction;
function myFunction() {
console.log("Object clicked!");
}
Text Objects
You can easily add text objects to the stage:
var sampleText = new createjs.Text('TutorialsPoint', 'Bold 20px Helvetica', '#000');
sampleText.x = 25;
sampleText.y = 25;
myStage.addChild(sampleText);
myStage.update();
Tick Events
The Ticker class provides a centralized tick system for animations, similar to AS3 timers:
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", myStage);
Tweens
The Tween class (part of TweenJS) enables smooth animations:
createjs.Tween.get(myChild).to({x: 200}, 1000);
Sound Integration
Sound can be added using the SoundJS library:
createjs.Sound.registerSound("path/to/sound.mp3", "mySound");
createjs.Sound.play("mySound");
Example: Drawing a Circle
Let's create a simple canvas with a green circle:
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script>
function init() {
var stage = new createjs.Stage("sampleCircle");
var circle = new createjs.Shape();
circle.graphics.beginFill("green").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
stage.update();
}
</script>
</head>
<body onload="init();">
<canvas id="sampleCircle" width="500" height="200"></canvas>
</body>
</html>
Example: Drawing a Rectangle
Here's how to draw a red rectangle:
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script>
function init() {
var stage = new createjs.Stage('sampleSquare');
var shape = new createjs.Shape();
shape.graphics.beginFill('red').drawRect(50, 50, 100, 100);
stage.addChild(shape);
stage.update();
}
</script>
</head>
<body onload="init();">
<canvas id="sampleSquare" width="500" height="200"></canvas>
</body>
</html>
Key Benefits
| Feature | Native Canvas | Easel.js |
|---|---|---|
| Drawing API | Complex context methods | Simplified graphics commands |
| Event Handling | Manual pixel detection | Built-in mouse events |
| Animation | Manual frame management | Built-in ticker and tweening |
Conclusion
Easel.js significantly simplifies HTML5 Canvas development by providing familiar ActionScript-like syntax and built-in features for graphics, events, and animations. It's an excellent choice for developers transitioning from Flash or those seeking a more intuitive canvas API.
433 Views
