使用 Easel.js 处理 HTML5 Canvas 元素
HTML5 Canvas 元素的流行众所周知，因为它们允许 Web 开发人员创建动画、成熟的应用程序以及交互式图表。但遗憾的是，对于某些人来说，理解 Canvas 非常困难，尤其是那些有 Flash 动画背景的人。
在本教程中，我们将探索 Easel.js 库，它允许我们使用 HTML5 Canvas 元素。 Easel.js 的语法与 ActionScript 类似，甚至具有显示列表、舞台、图形等功能，最终使 Flash 开发人员更容易使用画布。
现在我们对 Easel.js 有了一些了解，让我们了解可用的不同方法和属性。
要使用 Easel.js，第一步是导入和安装它，我们可以通过多种方式执行此操作，最常见的是使用 CDN 链接。CDN 链接如下所示。
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
现在让我们看看 Easel.js 带来的不同内容。
Easel.js 中的显示列表
EaselJS 中的显示列表的工作方式与 ActionScript 相同。请考虑下面显示的代码。
currentStage.addChild(myChild)
Easel.js 中的鼠标事件
我们可以非常轻松地在 Easel.js 中添加鼠标事件。您可以使用下面显示的代码片段来跟踪鼠标事件。
myChild.onPress = myFunction
myFunction(){console.log(passing a value);}
Easel.js 中的文本事件
我们也可以添加一个文本对象，它将被放置在舞台上。请考虑下面显示的代码片段。
var sampleText = new Text('TutorialsPoint+', 'Bold 12px Helvetica', #FFF);
sampleText.x = 25;
sampleText.y = 25;
myStage.addChild(myText);
myStage.update();
Easel.js 中的 Tick 事件
EaselJS 中的 Ticker 类用于提供集中的 tick。此 tick 事件以后也可以用作 AS3 计时器的替代品。请考虑下面显示的代码片段。
Ticker.setFPS(30); Ticker.addListener(myStage);
在上面的代码中，我们将帧速率设置为 30，并将舞台作为 听众添加到 ticker。
Easel.js 中的 Tweens
Easel.js 中的 Tween 类是一个外部附加类，当我们将 TweenJS 脚本添加到文档时，它可供我们使用。请考虑下面显示的代码片段。
Tween.get(myChild).to(x : 200);
Easel.js 中的声音
还可以通过将 SoundJS 脚本添加到我们的文档来播放声音。请考虑下面显示的代码片段。
SoundJS.add('mySound',sampleSound.mp3', 1); SoundJS.play('mySound');
在上面的代码片段中，我们使用了 add 和 play 方法，它们接受不同数量的参数。
使用 Easel.js 的简单 HTML5 Canvas
示例
现在我们知道了 Easel.js 中可用的不同函数和方法，让我们使用它们来创建一个简单的 Canvas。请考虑下面显示的 HTML 代码。
<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>
在上面的代码中，我们首先导入"createjs.min.js"，然后使用它创建一个圆形画布。如果运行上面的代码，您应该会在浏览器中看到一个绿色的圆圈。
在上面的例子中，我们画了一个圆圈。让我们再举一个例子，这次，我们将在画布上画一个正方形。请考虑下面显示的 HTML 代码。
示例
<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>
如果运行上述代码，您应该会在浏览器上看到一个红色方块。
结论
在本教程中，我们讨论了 Easel.js 的不同函数和方法，然后我们使用了两个简单示例来展示如何使用此库来处理 HTML5 Canvas 元素。
