Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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, interactive charts as well. But sadly, it is very hard for someone to understand canvas, especially if he/she has come from the Flash animation background.
In this tutorial, we will explore the Easel.js library, which allows us to work with HTML5 Canvas elements. The syntax of Easel.js is similar to ActionScript and it even has features like Display List, Stage, Graphics which ultimately makes the use of canvas easier for the Flash developers.
Now that we have a little idea about Easel.js, let's understand the different methods and properties that are available to us.
The first step in order to be able to use Easel.js is to import and install it, and there are multiple ways in which we can do the same, with the most common being using the CDN links. The CDN link is shown below.
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
Now let's look at the different things that Easel.js brings to the table.
Display List in Easel.js
The display list in EaselJS works just like ActionScript. Consider the code shown below.
currentStage.addChild(myChild)
Mouse Events in Easel.js
We can add a mouse event in Easel.js pretty easily. You can use the code snippet shown below to track Mouse Events.
myChild.onPress = myFunction
myFunction(){console.log(passing a value);}
Text Events in Easel.js
We can add a text object as well and it will be placed in the stage. Consider the code snippet shown below.
var sampleText = new Text('TutorialsPoint+', 'Bold 12px Helvetica', #FFF);
sampleText.x = 25;
sampleText.y = 25;
myStage.addChild(myText);
myStage.update();
Tick Events in Easel.js
The Ticker class in EaselJS is used to provide a centralized tick. This tick event can be later used as a substitute of an AS3 timer as well. Consider the code snippet shown below.
Ticker.setFPS(30); Ticker.addListener(myStage);
In the above code, we are setting the frame rate to 30 and adding the stage as a listener to the ticker as well.
Tweens in Easel.js
The Tween class in Easel.js is an external addition class, which gets available to us when we add the TweenJS Script to our document. Consider the code snippet shown below.
Tween.get(myChild).to(x : 200);
Sounds in Easel.js
Sound can also be played by adding the SoundJS script to our documents. Consider the code snippet shown below.
SoundJS.add('mySound', sampleSound.mp3', 1); SoundJS.play('mySound');
In the above code snippet, we are using the add and the play methods, that take different numbers of arguments.
A Simple HTML5 Canvas Using Easel.js
Example
Now that we know the different functions and methods that are available to us in Easel.js, let's use them to create a simple Canvas. Consider the HTML code shown below.
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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, 100);
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>
In the above code, we are importing the "createjs.min.js" first, and then we are using it to create a circle canvas. If you run the above code, you should see a green circle present in the browser.
In the above example, we drew a circle. Let's take another example, and this time, we will draw a square on the Canvas. Consider the HTML code shown below.
Example
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script>
function init() {
//Draw a simple sqaure on screen.
var stage = new createjs.Stage('sampleSquare');
var shape = new createjs.Shape();
shape.graphics.beginFill('red').drawRect(0, 0, 120, 120);
stage.addChild(shape);
stage.update();
}
</script>
</head>
<body onload="init();">
<canvas id="sampleSquare" width="500" height="200"></canvas>
</body>
</html>
If you run the above code, you should see a red square on the browser.
Conclusion
In this tutorial, we discussed the different functions and methods of Easel.js and then we used two simple examples to show how you can use this library to work with HTML5 Canvas elements.
126 Views
