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
Draw Lines with easelJS using Ticker in HTML
EaselJS is a JavaScript library that simplifies working with the HTML5 Canvas element. It's particularly useful for creating interactive graphics, animations, and games in web browsers.
To draw animated lines using the Ticker method in HTML with EaselJS, you need to set up a stage, create shape objects, and use the Ticker to continuously update the canvas.
Basic Setup
First, create the HTML structure with a canvas element and include the EaselJS library:
<!DOCTYPE html>
<html>
<head>
<title>EaselJS Line Drawing</title>
<script src="https://code.createjs.com/1.0.0/easeljs.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
// Initialize stage
var stage = new createjs.Stage("myCanvas");
var myLine = new createjs.Shape();
var startX = 100;
var startY = 100;
var color = "#FF0000";
// Add line to stage
stage.addChild(myLine);
// Ticker function to animate line
function drawLine() {
myLine.graphics.clear();
myLine.graphics.setStrokeStyle(4);
myLine.graphics.beginStroke(color);
myLine.graphics.moveTo(startX, 100);
myLine.graphics.lineTo(startX, startY);
myLine.graphics.endStroke();
startY += 2; // Animate line growth
if (startY > 500) {
startY = 100; // Reset line
}
stage.update();
}
// Start ticker
createjs.Ticker.addEventListener("tick", drawLine);
createjs.Ticker.framerate = 30;
</script>
</body>
</html>
Drawing Multiple Animated Lines
You can create multiple lines with different properties and animations:
<canvas id="multiCanvas" width="800" height="600"></canvas>
<script>
var stage = new createjs.Stage("multiCanvas");
var lines = [];
// Create multiple lines
for (var i = 0; i < 5; i++) {
var line = new createjs.Shape();
line.startX = 50 + (i * 150);
line.startY = 50;
line.currentY = 50;
line.color = ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF"][i];
line.speed = 1 + (i * 0.5);
lines.push(line);
stage.addChild(line);
}
function animateLines() {
for (var i = 0; i < lines.length; i++) {
var line = lines[i];
line.graphics.clear();
line.graphics.setStrokeStyle(3);
line.graphics.beginStroke(line.color);
line.graphics.moveTo(line.startX, line.startY);
line.graphics.lineTo(line.startX, line.currentY);
line.graphics.endStroke();
line.currentY += line.speed;
if (line.currentY > 550) {
line.currentY = 50;
}
}
stage.update();
}
createjs.Ticker.addEventListener("tick", animateLines);
createjs.Ticker.framerate = 60;
</script>
Key Methods
The essential EaselJS methods for line drawing are:
-
setStrokeStyle(thickness)- Sets line thickness -
beginStroke(color)- Starts drawing with specified color -
moveTo(x, y)- Moves to starting point without drawing -
lineTo(x, y)- Draws line to specified coordinates -
endStroke()- Completes the stroke -
clear()- Clears previous graphics
Ticker Configuration
The Ticker controls animation timing:
// Set frame rate (frames per second)
createjs.Ticker.framerate = 30;
// Add event listener for animation
createjs.Ticker.addEventListener("tick", animationFunction);
// Pause/resume ticker
createjs.Ticker.paused = true; // Pause
createjs.Ticker.paused = false; // Resume
Conclusion
EaselJS Ticker provides smooth animation capabilities for drawing dynamic lines. Use clear() to redraw lines each frame and stage.update() to refresh the canvas display.
406 Views
