HTML5 Canvas 游戏开发实例详解.pptx

李正林***@flashliziHTML5 Canvas游戏开发实例详解一些Canvas游戏DemoCanvas –可编程式图片(Scriptable Image)Canvas绘图方法?内置图形绘制(fill,stroke,moveTo,o,rect,arc,bezierCurveTo etc)?外部图片(drawImage,translate,scale,rotate,globalAlpha,setTransform etc)?低级像素处理(getImageData,putImageData,CanvasPixelArray)Canvas缺点对象碰撞、动画片段等高级功能对象管理事件监听低级原始需要一个高级工具面向对象的Canvas框架– CasualJSCasualJS特性简化Canvas图形绘制,方便管理可视对象,内置对象碰撞检测,提供按钮,动画片段等组件封装,把开发者从图形绘制的琐碎中解放出来,让开发者把注意力集中在应用的主要逻辑上。?类似AS3的面向对象的显示对象列表结构封装?内置显示对象渲染机制?基于帧的MovieClip动画片段实现?显示对象碰撞检测(矩形或像素碰撞)?内置简单的事件模型?原则上兼容所有支持Canvas的浏览器项目主页:http://code./p/casualjs//flashlizi/casualjs/显示对象继承树(DisplayObject Inheritance)DisplayObjectShapeBitmapDisplayObjectContainerTextStageSpriteMovieClipButton显示对象列表图(DisplayObject List Diagram)Stage (root)ShapeBitmapSpriteTextSpriteShapeBitmapText……实例详解二、创建和控制人物动画()一、绘制、控制静态图像()三、创建和控制多个人物(demo3.