Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,11/7/2009,#,Canvas,2D,应用,设计思路,常用内容,getContext(2d),setInterval,JSON,drawImage,计时系统,计时，速度控制，规划内容，打酱油!,计时器设计时.,过多的使用setInterval或setTimeout会影响脚本执行,速度。,setInterval结合一个计数器列表，循环绘制要控制的内容,。,每次循环后，清理掉Canvas内的像素或重新覆盖你的,背景信息。,单计时器下的JSON组织结构,背景层：优先画出背景层，构造游戏或动,画的视觉场景。,常驻层：角色或物品等显示层。,临时动画层：视觉效果层，通常是一些稍,纵即逝的内容。(烟雾、子弹),drawImage的参数组合,偷懒的3参组合：image,dx,dy,相对灵活的5参组合：image,dx,dy,dw,dh,BT9参：image,sx,sy,sw,sh,dx,dy,dw,dh,上图是一只自称混儿混儿的Panda抽自己嘴巴的瞬间！,Image绘制中注意的事项,图片载入迟缓易引起绘制失败。,图片过多会延长载入时间。,一图多片制，减少图片对象的创建次数,网速有限的情况下，鱼与熊掌不可兼得。,不要超出Canvas的绘制范围。,计数器的作用,动画有效的存活时间,动画播放的延迟处理,一图多片动画针的切换控制,得分统计与时间统计,还是打酱油,还是打酱油,控制器的设计,在JSON数据中，标记每个元,素绘制时的相关参数。,捕获事件，根据设计需求实现,参数的修改。,分析JSON数据，以便触发,像素范围内的触摸，点击等,事件。,结束语,对于创新来说，方法就是,新的世界，最重要的不是知,识，而是思路。,郎加明创新的奥秘27页,