最近cdc大会上各大牛分享了如何把flash技能延续到html5中，虽然我不喜欢js各种乱七八糟的写法，但是工作如果需要还是应该研究下，毕竟还没到财务自由的程度.下面入正题，我习惯用flashdevelop当编辑器，所以自然想让其成为js开发工具了，幸运的是flashdevelop新建项目的时候，已经加入了createjs app的模板，可以一键生成很多初始化的操作，cool，除此以外，js自定义函数也可以代码提示，基本符合我要求了，开工.
主要逻辑都在src/js/Main.js里面了，直接贴代码:
[code]
/** @define {string} */
var BUILD = “debug”;
(function(){
/**
* Main class of the app.
*/
function Main(){}
/**
* Entry point of the app.
*/
Main.main = function() // 相当于as3里Main类下面的static main方法
{
var main = new Main();
if (!window.HTMLCanvasElement)
{
alert(“Your browser does not support HTML5 Canvas.”);
return;
}
else main.initialize();
// entry point
main.createCircle();
}
var c = 3;
var d = 5;
var a;
Main.prototype.createCircle = function () // 相当于as3里Main类下面的public createCircle方法
{
a = new createjs.Shape();
a.graphics.beginFill(“#FF0000”);
a.graphics.drawCircle(0, 0, 30);
a.graphics.endFill();
a.x = 250;
a.y = 250;
this.mainStage.addChild(a);
};
/**
* Initializes the basics of the app.
/
Main.prototype.initialize = function()
{
/**
* mainCanvas
*/
this.mainCanvas = document.getElementById(“mainCanvas”);
/**
* mainStage
*/
this.mainStage = new createjs.Stage(this.mainCanvas);
this.mainStage.snapToPixelsEnabled = true;
/
* createjs
*/
createjs.Ticker.addListener(this);
createjs.Ticker.useRAF = true;
createjs.Ticker.setFPS(60);
}
/**
* Updates the stage on Ticker tick.
* @param event The recieved tick event.
*/
Main.prototype.tick = function(event)
{
a.x += c;
a.y += d;
if (0 > a.x – 30 || a.x + 30 > this.mainCanvas.width) c *= -1;
if (0 > a.y – 30 || a.y + 30 > this.mainCanvas.height) d *= -1;
this.mainStage.update();
}
/**
* Expose class.
*/
window.Main = Main;
})();
[/code]
然后直接run,就看到个红色的圆在浏览器里上蹦下跳了，哈哈
这些代码里面，只有
[code]main.createCircle();[/code]及
[code]var c = 3;
var d = 5;
var a;
Main.prototype.createCircle = function () // 相当于as3里Main类下面的public createCircle方法
{
a = new createjs.Shape();
a.graphics.beginFill(“#FF0000”);
a.graphics.drawCircle(0, 0, 30);
a.graphics.endFill();
a.x = 250;
a.y = 250;
this.mainStage.addChild(a);
};
[/code]
和
[code]
a.x += c;
a.y += d;
if (0 > a.x – 30 || a.x + 30 > this.mainCanvas.width) c *= -1;
if (0 > a.y – 30 || a.y + 30 > this.mainCanvas.height) d *= -1;
[/code]
是我加上去的，其他都是模板代码，无敌high了
用flashdevelop创建createjs应用