使用Easel.js操作HTML5 Canvas元素

HTML5 Canvas元素的流行程度众所周知，因为它允许Web开发者创建动画、完整的应用程序和交互式图表等等。但遗憾的是，对于某些人来说，理解canvas非常困难，尤其是在他们拥有Flash动画背景的情况下。

在本教程中，我们将探讨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，并将舞台添加为计时器的侦听器。

Easel.js中的补间动画

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代码。

Open Compiler
<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”，然后使用它来创建一个圆形canvas。如果您运行上面的代码，您应该会在浏览器中看到一个绿色的圆圈。

在上面的示例中，我们绘制了一个圆圈。让我们再举一个例子，这次我们在Canvas上绘制一个正方形。请考虑以下HTML代码。

示例

Open Compiler
<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元素。

更新于：2023年6月15日

229 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告