使用Easel.js处理HTML5 Canvas元素

众所周知，HTML5 Canvas元素很受欢迎，因为它们允许Web开发人员创建动画、完整的应用程序以及交互式图表。但很可惜，对于那些从Flash动画背景转来的人来说，理解Canvas非常困难。

在本教程中，我们将探索Easel.js库，它允许我们使用HTML5 Canvas元素。Easel.js的语法类似于ActionScript，它甚至具有类似于显示列表、舞台和绘图的功能，这最终使Flash开发人员更容易使用Canvas。

现在我们对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中的Tween动画

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画布

示例

现在我们已经了解了在Easel.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() {
         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>

如果你运行上面的代码，你应该在浏览器上看到一个红色的正方形。