html5 canvas 版 hello world! 暨haXe简介
沒想到我的第一個移動項目會是 html5 項目。
前一陣給一海外客戶開發了Flash 版的電子雜志，客戶還需要 ipad 版的。我最開始提出這樣一種解決方案：在現有Flash程序基礎上，使用AIR 2.7，修改一下界面，編譯成iOS的native應用，應用大小約在12M左右。
這種方案被客戶否決了，原因是不利于分發：每一期電子雜志或者每一系列電子雜志必須有一個單獨的應用，雖然只需要換換url換換logo，但也比較麻煩，需要app store發布，沒法自我發行。客戶最后要求采用html5方案，功能可以砍，特效可以降低，但是必須是html5開發的。于是抽時間預研了下html5下開發的可能性。
這種復雜交互式應用如果用js開發，會頭大的要命。還好有一個名叫jeash的haXe庫，在html5的canvas基礎上實現了Flash 的主要的 api，可以像寫flash程序一樣編寫 html canvas 應用。
首先介紹一下?haXe。
haXe 項目是Flash開源界的最大貢獻。 它的前身是大名鼎鼎的mtasc項目，mtasc 是一款開源的 actionscript 語言（Flash的腳本語言）編譯器。2005 年，haXe開始開發。haXe 超越了Flash領域，它的目標是一次編寫，到處編譯。比如，你寫一份haXe語言的代碼，可以編譯成js代碼，可以編譯成as3代碼，可以編譯成c++代碼，可以編譯成php代碼。等C# target和java target 推出后，便可以編譯成c#代碼和java代碼。這是開源界的一個奇葩。haXe語言和actionscript 3.0 非常相似。下面，我們用haXe語言來寫html5程序。
第一步：安裝開發環境
IDE選用FlashDevelop。FlashDevelop是免費的Flash和haXe的IDE，到官網下載安裝它。到haXe官網上下載安裝haXe編譯器，然后，打開FlashDevelop，在【Tools】->【Program Setting …】->【HaXeContext】面板中，加入haXe的路徑：
如此一來，就可以進行haXe開發了。
第二步：安裝 jeash 庫
安裝過程很簡單，進入控制臺中，輸入 “haxelib install jeash” ，按回車即開始安裝：
PS C:\Users\Administrator> haxelib install jeash?
Downloading jeash-0,8,5.zip...?
Download complete : 249848 bytes in 5.8s (42KB/s)?
? Install Html5Dom.hx?
? Install jeash/Error.hx?
? Install jeash/Lib.hx?
? ……
第三步：建立html5項目
建立一個類型為AS3 Project的HaXe項目 html5HelloWorld，如下圖：
接著，按照?http://haxe.org/com/libs/jeash/firststeps?文章的提示，先將Main.hx 修改為 App.hx，代碼修改為:
將 bin/index.html 修改為以下內容：
<html>?
??? <head>?
??????? <title>My first Jeash example</title>?
??? </head>?
??? <body>?
??????? <div id="haxe:jeash" style="width:150px; height: 150px"></div>?
??????? <script type="text/javascript" src="./app.js"></script>?
??? </body>?
</html>
接著修改編譯參數（【Project】->【Properties】），見下圖：
然后，在Release下編譯，可以看見 bin 目錄下多出了一個 app.js 的文件。文件大小為 238k，壓縮后 46 k。
用支持html5的瀏覽器打開 index.html 文件，可以看到運行結果：
第四步：讓它動起來
下面，我們在這個項目基礎上進行修改，加上“hello world”的字樣，再讓它動起來！
要寫動畫的話，需要一個緩動(Tween)庫，這里使用GTweenHx。運行下面命令安裝GTweenHx庫：
haxelib install GTweenHX
然后擴大index.html中div的尺寸，給出較大的動畫空間：
<html>?
??? <head>?
??????? <title>My first Jeash example</title>?
??? </head>?
??? <body>?
??????? <div id="haxe:jeash" style="width:300px; height: 100px"></div>?
??????? <script type="text/javascript" src="./app.js"></script>?
??? </body>?
</html>
在編譯參數中加上：
-lib GTweenHx
接著修改App.hx代碼為：
import flash.Lib;?
import flash.display.Shape;?
import flash.display.Sprite;?
import jeash.text.TextField;?
import com.gskinner.motion.GTweener;?
import com.gskinner.motion.GTween;
class App extends Sprite?
{?
??? static function main ()?
??? {?
??????? var ellipse:Shape = new Shape();?
??????? ellipse.graphics.beginFill( 0xFF9900, 1 );?
??????? ellipse.graphics.lineStyle( 0, 0xCCCCCC );?
??????? ellipse.graphics.drawEllipse( 40, 40, 100, 60 );?
??????? ellipse.graphics.endFill();?
??????? var tb:TextField = new TextField();?
??????? tb.text = "Hello world!";?
??????? tb.x = 10;?
??????? tb.y = 10;?
??????? var app = new App();?
??????? app.txt = tb;?
??????? app.shape = ellipse;?
??????? app.addChild( ellipse );?
??????? app.addChild(tb);?
??????? Lib.current.stage.addChild( app );?
??? }?
??? private var txt:TextField;?
??? private var shape:Shape;?
??? private var tween:GTween;?
??? private override function jeashAddToStage()?
??? {?
??????? super.jeashAddToStage();?
??????? #if js?
??????? GTween.patchTick(this);?
??????? #end?
??????? tween = new GTween(txt, 3, { x: 80 } );?
??????? tween.onComplete = this.repeateTween;?
??? }?
??? private function repeateTween(Void):Void?
??? {?
??????? tween.onComplete = null;?
??????? if (txt.x == 80)?
??????? {?
??????????? tween = new GTween(txt, 3, { x: 10 } );?
??????? }?
??????? else?
??????? {?
??????????? tween = new GTween(txt, 3, { x: 80 } );?
??????? }?
??????? tween.onComplete = repeateTween;?
??? }?
}
編譯通過。得到的app.js代碼大小為377k，壓縮后為80k。運行得到：
?
運行結果中，這個“Hello world!”會左右擺動。可以點擊?http://www.geblab.com/demo/html5/html5HelloWorld/index.html?在線運行！（我沒開壓縮，初次運行需要下載300多k的js）
====
Enjoy It!
====
最后，應greatghoul所請，來張躺床上寫代碼的特寫：
本文轉自xiaotie博客園博客，原文鏈接http://www.cnblogs.com/xiaotie/archive/2011/08/15/2139453.html如需轉載請自行聯系原作者
xiaotie?集異璧實驗室(GEBLAB)
總結
以上是生活随笔為你收集整理的html5 canvas 版 hello world! 暨haXe简介的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 天眼查如何收费
- 下一篇： 使用Nginx反向代理和proxy_ca