標籤：style http color os io strong ar cti
KineticJS教程(1-2)ysm @ iysm.net
郵箱：[email protected]
註：參考 http://www.html5canvastutorials.com/kineticjs/html5-canvas-events-tutorials-introduction-with-kineticjs/ 完成此文。
1.基本結構KineticJS首先是要綁定到HTML頁面上的一個DOM容器元素上，比如最常用的<div>標籤。KineticJS在此容器中建立一個稱之為舞台（stage）的結構，這個舞台由一個不可見的後台層和一個不可見的緩衝層組成，提供了高效能的路徑和像素檢測能力。舞台上再包含若干（至少一層）使用者層（layer），每個層上又包含有若干canvas元素，比如各種圖形、映像、元素組（組可以包含其他的圖形和其他的組）等。使用者還可以給這些層上的圖形、元素組、層本身以及舞台本身添加事件監聽方法，以響應滑鼠、鍵盤等事件。瀏覽器最終顯示的就是這些使用者層的疊加效果。
原始映像來源：http://www.kineticjs.com/how-it-works.php
2.第一個畫面現在我們開始用Kinetic製作我們的第一個畫面。
Kinetic繪圖的基本的流程可以如所示：
首先是建立一個HTML5頁面，在<head>裡添加對Kinetic庫的引用：
<script src=“./kinetic.js”></script>
在<body>中添加一個用於綁定到Kinetic用於建立舞台的容器，比如說可以是個<div>：
<div id=“container”></div>
我們的Kinetic映像就將在這個容器中完成繪製。
在本例中，我們打算建立一個600×400的舞台，並在中心位置畫一個紅色矩形框。
同樣是在<head>中添加指令碼：
<script>
//在頁面載入時進行繪圖
window.onload = function() {
//建立Kinetic舞台，綁定我們添加的<div>容器
var stage = new Kinetic.Stage({
container : “container”, //<div>的id
width : 600, //建立的舞台寬度
height : 400 //建立的舞台高度
});
//建立Kinetic使用者層
var layer = new Kinetic.Layer();
//建立一個Kinetic矩形對象
var rect = new Kinetic.Rect({
x : 200, //矩形左上方x座標
y : 150, //矩形左上方y座標
width : 200, //矩形的寬度
height : 100, //矩形的高度
fill : “red”, //矩形的填充色
stroke : “black”, //矩形邊緣線的顏色
strokeWidth : 4 //矩形邊緣線的寬度
});
//向使用者層中添加上面的矩形
layer.add(rect);
//將上面的使用者層添加到舞台上
stage.add(layer);
stage.draw();
};
</script>
用瀏覽器開啟頁面就能看到如下的映像了：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
