HTML5 Canvas开发框架：CasualJS Framework

CasualJS Framework是根据ActionScript3?.0的架构开发的一套适用于HTML5 Canvas的面向对象的开发框架。虽然Canvas提供了强大的绘图功能，但满足不了高级开发的需要。利用CasualJS的显示对象架构及渲染机制，你可以轻松的在Canvas中操控各种位图、图形、影片剪辑等显示对象。

示例：
* DisplayObject (显示对象)
* MovieClip (影片剪辑及帧动画)
* Graphics (绘制图形)
* Button (按钮)
* DisplayObject Collision (显示对象碰撞检测)


游戏Demo：
* Runner (画面超炫的塔防游戏)
* Gomoku (五子棋)

在线API文档：http://www.html5idea.com/casualjs/doc/index.html

项目主页：http://code.google.com/p/casualjs/

源码大概看了一遍，很不多错的说。
感觉很是有actoinscript的风格

谢谢LZ分享，示例、文档方面都挺全的，准备试一下CasualJS

为什么下载的zip包中的example/Button.html 直接通过浏览器打开该页面无法成功触发事件

//register mouse event handlers	
playBtn.onMouseMove = playBtn.onMouseOver = playBtn.onMouseOut = playBtn.onMouseDown = playBtn.onMouseUp = mouseHandler;	
stopBtn.onMouseMove = stopBtn.onMouseOver = stopBtn.onMouseOut = stopBtn.onMouseDown = stopBtn.onMouseUp = mouseHandler;

将其部署到web server，通过URL访问Button.html才能触发btn指定的事件？

这个不属于前台的事件监听？也需要后端server？

相关源码我还没有学习，请帮忙看下这个问题？

太厉害了,不知道效率怎样

这是按钮Button是通过监测鼠标指针下的图片数据实现的，核心方法是context.getImageData()，而这个方法在Firefox这样的浏览器中有个限制，就是在使用本地图片的时候上面方法会报错。而如果部署到web上后就好了。

当然也可以修改firefox的配置，输入about:config，搜索strict_origin_policy字段，修改为false，就ok了。

google chrome也有这个问题。safari则没有这个问题。

第一个游戏在FireFox3.6下140多关时就很卡。
第二个游戏人工智能太简单，两下就把电脑赢了。

画面什么的还不错。那个js框架很好。

 谢谢LZ帮助，这里我试过一下，目前遇到2个问题想请你再帮忙下：

1.addEventListener(type, listener) 事件监听只能是Stage对象吗？

function start(){
	//create stage
	stage = new Stage(context);
	stage.setFrameRate(20);
	stage.traceMouseTarget = true;
	
	//a shape width a rectangle and a circle
	var shape = new Shape();
	shape.name = "testshape";
	shape.graphics.lineStyle(1, "red");
	var s = shape.graphics.drawRect(1, 1, 100, 100);
	shape.x = 40;
	shape.y = 60;
	
	shape.addEventListener(StageEvent.MOUSE_DOWN, hello);
	//stage.addEventListener(StageEvent.MOUSE_DOWN, hello);
	stage.addChild(shape);
}

function hello(e){
	alert("hello");
}

这里我想给shape添加一个事件监听，但都无法成功，请帮忙下。

2.lineStyle(thickness, lineColor, alpha, lineCap, lineJoin, miterLimit) 如下写法的时候，随着thickness值的增加，线条会呈现不均匀变化。

shape.graphics.lineStyle(1, "red");

shape.graphics.lineStyle(1, "red");

shape.graphics.lineStyle(7, "red");

 

 

1. addEventListener可以用于添加对象的事件侦听，但是针对StageEvent中的几个事件EnterFrame，MouseDown等，便于提高效率，仅有stage会派发这几个事件。对于添加到stage的所有显示对象，均可通过设置onMouseEvent回调参数进行来侦听相应事件。

 

比如：

 

shape.mouseEnabled = true; //shape默认是不接受鼠标事件的，因此要打开这个

shape.onMouseEvent = function(e)

{

       if(e.type == "onmousedown")

       {

             //鼠标按下处理操作。。。

       }

}

 

更多的可以借鉴Button中的实现。

 

 

2. 这可以说一个bug。因为设置线条粗细后，在画形状的时候，没有计算线条的宽度。 如果没有正确设置画形状的坐标的话，这样会导致左边、上边的线条显示不完整。

 

比如：

 

shape.graphics.lineStyle(5, "#ffffff"); //设置线条宽度为5

shape.graphics.drawRect(5, 5, 100, 100) //在drawRect时的x，y不能小于5，否则线条会显示不完整。

 

这个会在后续版本中修正。

 

哈哈，再次谢谢分享，我明白了 :)

 

希望这个project可以不断完善，更多的参考例子、以及更详细的文档说明，LZ加油！