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/

评论

12 楼 flashlizi 2011-02-26  

skyblue1984 写道

形参能不能考虑采用json风格的定义方式?

个人不太倾向json（object）形式的参数定义方式。尽管这种方式会带来一些便利，但也会带来很多问题。

第一就是这种方式的参数定义不明显，使用者不能从函数定义看出需要传哪些参数，笼统的一个json对初学者来说就是完全不明白函数如何传参。

第二个问题就是这种传参的效率。虽然没做过测试，但个人认为跟直接传参相比，用json对象封装后的传参效率要低，内存开销也会大一些。

11 楼 skyblue1984 2011-02-26  

形参能不能考虑采用json风格的定义方式?

10 楼 flashlizi 2011-02-24  

mfkvfn 写道

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

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

第一个游戏是在开发框架的时候做的，并不完整，效率也没怎么优化。不过这个游戏画面渲染任务比较重，
firefox的js引擎一般，还是safari，chrome快多了。
目前看来canvas还不是太适合开发大尺寸，高渲染的应用。也看好chrome的js引擎。

第二个玩玩就好了，呵呵，我只能算五子棋入门级水平，简单AI也让人有成就感：）

9 楼 joy2everyone 2011-02-24  

<div class="quote_title">flashlizi 写道</div>
<div class="quote_div">
<div class="quote_title">joy2everyone 写道</div>
<div class="quote_div">
<p><br><br> 谢谢LZ帮助，这里我试过一下，目前遇到2个问题想请你再帮忙下：</p>
</div>
<p><br>1. addEventListener可以用于添加对象的事件侦听，但是针对StageEvent中的几个事件EnterFrame，MouseDown等，便于提高效率，仅有stage会派发这几个</p>
<p>......</p>
</div>
<p> </p>
<p>哈哈，再次谢谢分享，我明白了</p>
<p> </p>
<p>希望这个project可以不断完善，更多的参考例子、以及更详细的文档说明，LZ加油！</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>

8 楼 flashlizi 2011-02-24  

<div class="quote_title">joy2everyone 写道</div>
<div class="quote_div">
<p><br><br> 谢谢LZ帮助，这里我试过一下，目前遇到2个问题想请你再帮忙下：</p>
</div>
<p><br>1. addEventListener可以用于添加对象的事件侦听，但是针对StageEvent中的几个事件EnterFrame，MouseDown等，便于提高效率，仅有stage会派发这几个事件。对于添加到stage的所有显示对象，均可通过设置onMouseEvent回调参数进行来侦听相应事件。
</p>
<p> </p>
<p>比如：
</p>
<p> </p>
<p>shape.mouseEnabled = true; //shape默认是不接受鼠标事件的，因此要打开这个
</p>
<p>shape.onMouseEvent = function(e)
</p>
<p>{
    </p>
<p>       if(e.type == "onmousedown")
</p>
<p>       {
</p>
<p>             //鼠标按下处理操作。。。
    </p>
<p>       }</p>
<p>
}
</p>
<p> </p>
<p>更多的可以借鉴Button中的实现。
</p>
<p> </p>
<p> </p>
<p>2. 这可以说一个bug。因为设置线条粗细后，在画形状的时候，没有计算线条的宽度。
如果没有正确设置画形状的坐标的话，这样会导致左边、上边的线条显示不完整。
</p>
<p> </p>
<p>比如：
</p>
<p> </p>
<p>shape.graphics.lineStyle(5, "#ffffff"); //设置线条宽度为5
</p>
<p>shape.graphics.drawRect(5, 5, 100, 100) //在drawRect时的x，y不能小于5，否则线条会显示不完整。
</p>
<p> </p>
<p>这个会在后续版本中修正。</p>

7 楼 joy2everyone 2011-02-24  

<p><br><br> 谢谢LZ帮助，这里我试过一下，目前遇到2个问题想请你再帮忙下：<br><br>1.addEventListener(type, listener) 事件监听只能是Stage对象吗？</p>
<pre name="code" class="javascript">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");
}
</pre>
<p><br><br>这里我想给shape添加一个事件监听，但都无法成功，请帮忙下。<img src="/images/smiles/icon_smile.gif" alt=""><br><br>2.lineStyle(thickness, lineColor, alpha, lineCap, lineJoin, miterLimit) 如下写法的时候，随着thickness值的增加，线条会呈现不均匀变化。</p>
<pre name="code" class="javascript">shape.graphics.lineStyle(1, "red");
</pre>
<p><br>shape.graphics.lineStyle(1, "red");</p>
<p><br><img src="http://dl.iteye.com/upload/attachment/424552/93b776fd-e718-39ef-a458-4fe92f01a679.jpg" alt=""><br></p>
<p>shape.graphics.lineStyle(7, "red");</p>
<p><br><img src="http://dl.iteye.com/upload/attachment/424554/ba8c28d9-befc-32f1-9777-8efd76bab32b.jpg" alt=""></p>
<p> </p>
<p> </p>

6 楼 mfkvfn 2011-02-24  

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

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

5 楼 flashlizi 2011-02-24  

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

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

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

joy2everyone 写道

为什么下载的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？

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

4 楼 janrn 2011-02-24  

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

3 楼 joy2everyone 2011-02-24  

为什么下载的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？

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

2 楼 joy2everyone 2011-02-24  

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

1 楼 scottcgi 2011-02-22  

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