資料結構
網路
關係資料庫管理系統 (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 次瀏覽
