高恩博Canvas2D动画与游戏设计思路

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