本文目錄一覽：
- 1、如何使用Createjs來編寫HTML5遊戲EaselJS簡介
- 2、easeljs的drawrect的高度參數怎麼會翻倍？
- 3、HTML5動畫框架easeljs中setFPS函數
- 4、createjs.shape.call什麼意思
- 5、如何用JS寫一個chrome插件來搜索現成的網頁內容並替換
如何使用Createjs來編寫HTML5遊戲EaselJS簡介
CreateJS
CreateJS 是一套可以構建豐富交互體驗的 HTML5 遊戲的開源工具包，旨在降低 HTML5 項目的開發難度和成本，讓開發者以熟悉的方式打造更具現代感的網路交互體驗。
CreateJS 中包含：
EaselJS：用於 Sprites、動畫、向量和點陣圖的繪製，創建 HTML5 Canvas 上的交互體驗（包含多點觸控），同時提供 Flash 中的「顯示列表」功能。
TweenJS：一個簡單的用於製作類似 Flash 中「補間動畫」的引擎，可生成數字或非數字的連續變化效果。
SoundJS：一個音頻播放引擎，能夠根據瀏覽器性能選擇音頻播放方式。將音頻文件作為模塊，可隨時載入和卸載。
PrloadJS：幫助你簡化網站資源預載入工作，無論載入內容是圖形、視頻、聲音、JS、數據……
以上的Createjs介紹來自百度，不過通過介紹可以知道，雖然CreateJS看起來複雜，不過四個部分各有作用，其中最主要的就是EaselJS，其餘三項不過是為他服務。
一.如何使用EaselJS
首先到 下載最新版的EaselJS，下載解壓後可以在lib文件夾中找到easeljs-0.8.1.min.js,同時在壓縮包中可以找到一個examples和tutorials目錄，這兩個目錄中包含一些入門介紹和例子，有英語基礎可以看看，DOC文件夾中包含easeljs所有的api。（同理，可以得到createjs包含的其他三項，其目錄結構都與EaselJS相似）。
1.得到easeljs-0.8.1.min.js後，新建一個HTML5文件並導入之：
[html] view plain copy
script src=”easeljs-0.8.1.min.js”/script
2.入口函數和創建canvas標籤
[html] view plain copy
body onload=”init();”
canvas id=”game” width=”1000″ height=”700″ style=”background-color: white”/canvas
/body
3.編寫自己的javascript代碼，在函數init()中首先應該使用HTML中的canvas標籤來創建一個Stage，createjs中用到的所有元素，都是添加在這個stage當中的，添加後調用stage.update()方法即可使得添加的元素顯示在頁面上。在創建Stage時，可以直接使用Canvas的id來創建，也可以調用document.getElementById(“game”)，選取canvas來創建，沒有區別。
[javascript] view plain copy
script
function init(){
var stage = new createjs.Stage(“game”);
…….
stage.update();
}
/script
二.使用EaselJS創建圖形和文字
最簡單的遊戲都是由文字和圖形組成，使用EaselJS添加文字和圖形非常的簡單。
1.添加文字
[html] view plain copy
var txt = new createjs.Text(“HELLO”,”20px Times”,”#000″);
Createjs中所有的元素都通過調用new createjs.XXXXX來創建，Text包含三個參數分別是顯示的字元，字體及大小，最後是顏色。當然在創建完成後可以隨意改變txt的x,y坐標和對其，居中以及內容等等的屬性。例如：
[html] view plain copy
txt.x = 100;
txt.y = 100;
txt.text = “hello, world!”
完成後記得一定要把新創建的txt添加到stage中才能正常顯示
easeljs的drawrect的高度參數怎麼會翻倍？
canvas id=”gameview” width=”400″ height=”400″
設置一下canvas的width和height，如果沒有設置，則默認是width:300px,height:150px.
此時如果你又用css規定了canvas的寬度和高度的樣式，那就會產生這種不想出現的縮放效果。
可以參考：
HTML5動畫框架easeljs中setFPS函數
setFPS、getFPS是EaselJS中Ticker類用於設置和獲取幀頻的函數。
EaselJS中Ticker類動畫機制：
1、 逐幀動畫
逐幀動畫，把動畫（例如人物動作）進行分解，然後繪製出連續的、具有代表性的動作，連續播放形成動畫，逐幀動畫適用於複雜的不連續的動畫。
實現逐幀動畫主要需要兩個東西，動作關鍵幀和動起來的機制。
「動畫」機制： 使動畫動起來的機制，這裡使用EaselJS的一個類Ticker
createjs.Ticker.addEventListener(“tick”, tick);
function tick(evt) {
//some code
}
Ticker的幾個關鍵方法，setFPS、getFPS設置和獲取幀頻，setInterval、getInterval設置和獲取時間間隔，setPaused、getPaused設置和獲取暫停等，這些都是靜態方法。
createJS上的逐幀動畫示例：
!DOCTYPE html
html lang=”en”
head
meta charset=”UTF-8″
meta author=”pingfan” content=”creatJSGame”
title玩轉createJS遊戲/title
link rel=”stylesheet” href=”../css/game.css”
/head
body
canvas id=’canvas’ width=”960″ height=”400″瀏覽器不支持canvas，請使用現代瀏覽器。/canvas
script src=”/script
script
var stage=new createjs.Stage(“canvas”),
container=new createjs.Container(),
// 定義SpriteSheet 參數
data={
“animations”:{
“run”: [0, 25, “jump”],
//start,end,next,speed開始幀，結束幀，下一個動作，運行速度
“jump”: [26, 63, “run”,1]
},
“images”: [“”],
“frames”:{
//單個幀的高度，寬度，就是png圖片裡面那麼多個幀一個幀的大小
“height”: 292.5,
“width”:165.75,
//相對於原始偏移的位置
“regX”: 0,
“regY”: 0,
//幀數
“count”: 64
}
};
//實例精靈動畫集
var move = new createjs.SpriteSheet(data);
//SpriteSheet類設置幀和動畫,裡面的run為開始的動畫
var grant = new createjs.Sprite(move,”run”);
//設置在舞台中的位置
grant.x=360;
grant.y=100;
// 把動畫放到舞台上，創建一個間隔事件偵聽，進行動畫
container.addChild(grant);
stage.addChild(container);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener(“tick”,stage);
stage.update();
/script
/body
/html
2、補間動畫
補間動畫，指我們給定動作的初始狀態和結束狀態，然後動畫系統（例如動畫軟體）自動補齊中間狀態，從而形成動畫，補間動畫適用於物體的移動、狀態的改變等簡單的動畫。
補間動畫實例，讓剛剛那個原地跑步的人，向前方跑動，單擊時表示跳起：
!DOCTYPE html
html lang=”en”
head
meta charset=”UTF-8″
meta author=”pingfan” content=”creatJSGame”
title玩轉createJS遊戲/title
link rel=”stylesheet” href=”../css/game.css”
/head
body
canvas id=’canvas’ width=”960″ height=”400″瀏覽器不支持canvas，請使用現代瀏覽器。/canvas
button id=’btn’暫停pause/button
script src=”/script
script
var stage=new createjs.Stage(“canvas”),
container=new createjs.Container(),
// 定義SpriteSheet 參數
data={
“animations”:{
“run”: [0, 25, “run”,1.5],
//start,end,next,speed開始幀，結束幀，下一個動作，運行速度
“jump”: [26, 63, “run”,1.5]
},
“images”: [“../img/runningGrant.png”],
“frames”:{
//單個幀的高度，寬度，就是png圖片裡面那麼多個幀一個幀的大小
“height”: 292.5,
“width”:165.75,
//相對於原始偏移的位置
“regX”: 0,
“regY”: 0,
//幀數
“count”: 64
}
};
//實例精靈動畫集
var move = new createjs.SpriteSheet(data);
//SpriteSheet類設置幀和動畫,裡面的run為開始的動畫
var grant = new createjs.Sprite(move,”run”);
//設置在舞台中的位置
grant.x=20;
grant.y=22;
// 把動畫放到舞台上，創建一個間隔事件偵聽，進行動畫
container.addChild(grant);
stage.addChild(container);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener(“tick”,tick);
//speed用來做加速度
var speed=1;
function tick(){
if(!createjs.Ticker.getPaused()){
grant.x+=3*speed;
stage.update();
speed+=.01;
(grant.xstage.canvas.width) (grant.x=0,speed=1)
}
}
//偵聽滑鼠事件
stage.addEventListener(“stagemousedown”,handleClick);
function handleClick(){
//alert(11);
grant.gotoAndPlay(“jump”);
}
//設置按鈕暫停
var btn=document.getElementById(“btn”);
btn.addEventListener(“click”,toggleMove,false);
function toggleMove(){
// grant.gotoAndStop();
//其實實現暫停和運動就是false和true切換
var paused = !createjs.Ticker.getPaused();
createjs.Ticker.setPaused(paused);
btn.value=”暫停pause” ? “運動play” : “暫停pause”;
}
stage.update();
/script
/body
/html
createjs.shape.call什麼意思
call方法的第一個參數定義了this關鍵字在被調用方法的執行上下文中指向和對象。
每個JavaScript的代碼執行上下文都提供了this關鍵字
而this理論上是你當前所操作的js對象。
function Shape() { this.x = 0; this.y = 0; }
function Circle() { this.radius = 0;
Shape.call(this); }
最後一行代碼Shape.call(this)調用了Shape構造函數並改變了當Circle構造函數被調用時指向this的this值。
啥意思？
var c = new Circle();
新建一個對象。這行代碼調用了Circle構造函數，它首先在c上綁定了一個變數radius。此時的this指向的是c。
我們接著調用Shape構造函數，然後將Shape中的this值指向當前在Circle中的this值，也就是c。Shape構造函數將x和y綁定到了當前的this上，也就是說，c現在擁有值為0的x和y屬性。
如何用JS寫一個chrome插件來搜索現成的網頁內容並替換
input type=”button” onclick=”createjs()”/
function createjs()
{
var fso,f1
fso=new ActiveXObject(“Scripting.FileSystemObject”);
f1=fso.CreateTextFile(“e:\\js.js”,true); //路徑自行定義，也可以能過參數
f1.WriteLine(“js代碼”);
f1.WriteBlankLines(1);
f1.Close();
}
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/198814.html
微信掃一掃 
支付寶掃一掃 