数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学使用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代码。
<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代码。
示例
<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元素。
229 次浏览
