canvas教程

Canvas 核心技术

字号+ 作者:H5之家 来源:H5之家 2017-07-07 16:04 我要评论( )

《Canvas核心核技术》一书详细讲解了H5 Canvas 2D绘图的相关的知识。包括绘图环境、路径、剪辑区域、合成模式等基本概念,以及动画及游戏制作的基本流程。

《Canvas核心核技术》一书详细讲解了H5 Canvas 2D绘图的相关的知识。包括绘图环境、路径、剪辑区域、合成模式等基本概念,以及动画及游戏制作的基本流程。

双缓冲机制及填充的非零环绕原则
  • 双缓冲技术:动画渲染过程,其实是不断地绘制、擦除、绘制,擦除动作直接在视窗中操作可能会造成动画闪烁,为解决这个问题,大多浏览器都是先将所有绘图绘制到缓冲区中,然后一次性覆盖视窗中的内容。
  • 非零环绕原则:对给定闭合路径执行填充,如果路径中有多个闭合区域,那么浏览器按以下策略决定该区域是否被执行填充
  • 路径与直线交点处路径的方向顺时针为1否则为-1
  • 从区域中任出一条直线到整个路径外,路径与该直线交点处的路径方向的和非零即填充,为零不填充
  • 绘图策略及设计模式
  • 采用update及draw方法分别做更新和绘制
  • update只更新图形对像属性,draw方法专注绘制。这样做使得绘制和更新有了自己的专有职责,隔离绘制和更新可以大大减小代码杂度。

  • 使用行为模式以添加行为的方式为图形对像添加动画效果

  • 用状态模式响应用户事件

  • 通用算法及技巧
  • 使用时间轴扭曲方法实现时间相关的动画效果,对这些算法进行封装可重复使用
  • 离屏Canvas使用
  • 离屏Canvas可以用看作是一个图像缓存,对动画绘制中的比较耗费资源且很少发生改变的场景、局部场景或组件可以先绘制到离屏canvas中,然后通过拷贝的形式拷贝到视窗中。
  • 由于拷贝方法支持根据指定参数缩放,故可以有拉伸或缩放需求的应用场景中使用。
  • 精灵及图片处理
  • 精灵由绘制器及其行为组成,可以通过动态更换精灵的绘制器实现不同的显示效果,也可以通过动态的添加或删除精灵的行为来改变动画效果。
  • 对于外部事件,如键盘或鼠标事件及时钟事件等都可以通过行为加在精灵上。
  • 配合html标签实现更丰富的控件
  • 对控件包裹一层div可使对控件使用和使用普通dom元素一样方便。
  • 尽可能使用浏览器已经支持的控件来丰富你的控件。
  • 碰撞检测
  • 最简单的碰撞检测就是通过对不规则图形规则化,然后使用简单的几何公式判断各图形两两之间是否重叠来判断是否发生碰撞。常见的有外接矩形法和外接圆形。

  • 光线投射法用于判断运动较快的物体的碰撞。当一个物体A沿一定方向向另一个物体B快速移动时,如果物体比较小,那么在动画更新过程中,很有可能这两个物体不发生真实的碰撞,而是直接从B的前方直接到后方。比如子弹的运动。如果动画播放过程中A由B的前方直接到了后方,并且A的速度向量的反向延长线与B有相交,则任为碰撞发生了。

  • 通过分离轴定理(SAT)判断是否发生碰撞

    对于任意两个多边形,通过计算两个图形在其所有边上的投影是否有重叠来判断是否发生碰撞,跟据定理,只要有一个投影有重叠就表示两个多边形有重叠部分。

    1. 投影:多边形到边的投影用数学表示即为数轴上的线段。 2. 通过向量计算投影:计算所有多边形的所有原点到顶点的向量到边的单位向量的所有点积集合,取最大值和最小值构成数轴上的线段即为投影

    对于圆与任意多边形,判断方式不变,由于圆没有边,故需要计算找出多边形所有顶点中离圆心最近的顶点到圆心的向量作为圆提供的“边”(投影轴)进行计算

    1. 圆的投影:原点到圆心向量与轴的点积加减半径构成的线段

    对于圆与圆直接计算圆心矩与半径和即可判断是否发生碰撞。

  • 在实际应用场景中需要根据不同问题决定采用何种检测方式,有时也会采用多种方式组合进行检测,以提高准确率。

  • 游戏引擎
  • 游戏引擎是通用的游戏实现框架,实现对游戏状态的控制以及事件处理的封装,声音的控制,精灵的控制等。
  • 统一调度事件对各个游戏对象的控制、游戏对像的状态。统一绘制游戏对像、播放声音。维护游戏的全局状态信息。

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • HTML5-----Canvas 学习日记1

      HTML5-----Canvas 学习日记1

      2017-07-07 13:00

    • 用js+canvas画神经网络

      用js+canvas画神经网络

      2017-07-06 18:01

    • Html5 Canvas+Javascript实现一个简单画图程序(二)

      Html5 Canvas+Javascript实现一个简单画图程序(二)

      2017-07-06 18:00

    • Literally Canvas下载 0.4.1 官方版

      Literally Canvas下载 0.4.1 官方版

      2017-07-06 16:19

    网友点评