The JavaScript library Easel.js
reduces the complexity of creating animations and rich interactive environments with the canvas
tag. In this recipe, we will use a series of images in a single file named "sprites" to show how to use Easel.js
to control which graphic image in the sprite is selectively displayed.
Create the opening tags for an HTML5 file. Your code should look similar to the following code block:
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title> Animating images using BitmapSequence and SpriteSheet</title>
Next, link to the main stylesheet styles.css
used in this recipe: <link href="styles.css" rel="stylesheet" type="text/css" />
.
Next, we will import the Easel.js
Framework library by inserting...