Browse > Home > HTML5 > HTML5 Canvas开发框架:CasualJS Framework

| Subcribe via RSS

HTML5 Canvas开发框架:CasualJS Framework

一月 30th, 2011 | 1 views | Posted by flashlizi in HTML5

最新更新:
2011-3-6 增加显示对象碰撞检测DisplayObject.hitTestObject及示例。

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

框架特性:
* 类似AS3的显示对象列表结构封装
* 基于帧的显示对象渲染机制
* 基于帧的MovieClip动画片段实现
* 内置简单的事件模型

演示和示例:
* 显示对象DisplayObject
* 影片剪辑MovieClip
* 按钮Button
* 绘制图形Graphics
* 显示对象碰撞检测Collision

* 塔防游戏Runner
* 斗地主

API文档:
* API在线文档:http://www.riaidea.com/html5/casualjs/doc/

下载:
* 完整版本:casualjs v0.1 (包括源码、API文档和示例)
* 源码也可到google svn下载:http://code.google.com/p/casualjs/

项目主页:
* http://code.google.com/p/casualjs/
* www.html5idea.com

这是一个开源框架并且刚刚起步,如果你有兴趣参与,请联系我。

19 Responses to “HTML5 Canvas开发框架:CasualJS Framework”

  1. loki Says:

    你这个框架和easeljs有什么区别或者联系?


  2. flashlizi Says:

    你好,要说联系的话,都是采用的一种类似as3显示结构的oop方式,这让有过AS3开发经验的朋友更容易上手。但具体实现方式上有很大的差别,比如继承方式,渲染机制,事件模型,以及一些具体的实现比如MovieClip都不一样。


  3. meters Says:

    看到这个框架很震撼,前面也有这样的想法,但是js太差了,一直在狂补,非常感谢能让我看到这个东西。持续关注并且向你学习。


  4. gt666778 Says:

    框架很不错,我用得很开心。如果能实现mask效果就更好了,发现好多动画都需要噎。


  5. flashlizi Says:

    恩,会考虑的。


  6. gt666778 Says:

    发现改变显示对象的width、height属性对显示外观无影响噎,成了只是储存数据的属性了,而且不修改的话它们的值一直会是0。


  7. flashlizi Says:

    一个对象width和height并不能全部自动获取,bitmap除外。有些情况下需要手动指定。width和height在获取对象的显示区域,对象重叠碰撞等检测中需要用到。


  8. gt666778 Says:

    原来是这样啊。

    对了,用IE9的时候遇到个错误:“SCRIPT438: 对象不支持“getContext”属性或方法 casual-0.1.min.js, 行11 字符556”

    我把min版解压后大概是指340多行的下面代码:
    var a = document.createElement(“canvas”);
    a.width = a.height = 1;
    c.__hitTestContext = a.getContext(“2d”);

    竟然说a不支持getContext…


  9. flashlizi Says:

    问题可能不在340行的代码那里。你检查下看是那个地方的参数设置或类型有误。


  10. gt666778 Says:

    发现显示对象的不透明度低于0.4左右,鼠标事件就失效了,手形指针也没有了
    mc.alpha=0.3;
    mc.mouseEnabled=true;
    mc.useHandCursor=true;
    mc.onMouseEvent=aaaFun;


  11. flashlizi Says:

    这个你可以通过修改DisplayObject.__hitTestTolerance属性来调整。


  12. QQ28269890 Says:

    好棒啊,能加我QQ么?


  13. 球球 Says:

    楼主的框架非常好,以后会考虑使用,希望楼主继续完善程序,另外我想请问楼主您的api文档是用工具生成的还是自己做的?


  14. flashlizi Says:

    文档可以用javascript toolkit来生成。


  15. dondong349 Says:

    这个框架确实不错,但是文档内容太少了,有些地方看的很是模糊。希望楼主继续完善完善。呵呵


  16. flashlizi Says:

    请关注最新的框架quarkjs: http://github.com/quark-dev-team/quarkjs


  17. WI Says:

    请问这个框架和quarkjs有什么区别。?


  18. flashlizi Says:

    架构和功能都有所不同,比如quarkjs在移动平台也有较好的性能表现。建议使用quarkjs。


  19. kk Says:

    希望能提供个中文api文档!期待完善,这个非常值得学习^_^


Leave a Reply