Html5 canvas 游戏开发实例详解
- 3. Canvas – 可编程式图片（Scriptable Image) Canvas绘图方法 • 内置图形绘制（fill，stroke，moveTo，lineTo，rect，arc， bezierCurveTo etc） • 外部图片（drawImage，translate，scale，rotate，globalAlpha， setTransform etc） • 低级像素处理（getImageData，putImageData，CanvasPixelArray)
- 4. Canvas缺点 事件监听 对象管理 低级原始 对象碰撞、 动画片段等 高级功能 需要一个高级工具
- 5. 面向对象的Canvas框架 – CasualJS 简化Canvas图形绘制，方便管理可视对象，内置对象碰撞检测，提供按钮，动画片段等组件封 装，把开发者从图形绘制的琐碎中解放出来，让开发者把注意力集中在应用的主要逻辑上。 CasualJS特性 类似AS3的面向对象的显示对象列表结构封装 内置显示对象渲染机制 基于帧的MovieClip动画片段实现 显示对象碰撞检测（矩形或像素碰撞） 内置简单的事件模型 原则上兼容所有支持Canvas的浏览器 项目主页： http://code.google.com/p/casualjs/ http://github.com/flashlizi/casualjs/
- 6. 显示对象继承树（DisplayObject Inheritance） DisplayObject Shape DisplayObjectContainer Bitmap Sprite Stage Text MovieClip Button
- 7. 显示对象列表图（DisplayObject List Diagram） Stage (root) Shape Sprite Bitmap Shape Sprite Text …… Bitmap Text
- 8. 实例详解 一、绘制、控制静态图像（demo1.html） 二、创建和控制人物动画（demo2.html） 三、创建和控制多个人物（demo3.html） 注意： 因为CasualJS使用到了context.getImageData()方法，在本机测试时可能会由于同源策略产生SECURITY_ERR: DOM Exception 18 错误。 Firefox： 设置security.fileuri.strict_origin_policy为false Chrome： 添加 –allow-file-access-from-file参数
- 9. 一些开发经验 图片资源打包 （如TexturePacker） 顺手的开发工具 （JSEclipse或其他） 资源集中管理（如R.js) 代码组织和管理：包、模块 代码编写：继承、接口、组合等OOP思想 多个Canvas组合，减少重绘，提高效率 编译发布：Google Closure Compiler或其他 代码保护：混淆、加密等