WEB前端培训之David Geary对HTML5 的 2D 视频游戏详细剖析思路二

更新时间:2017-06-15 来源:黑马程序员web前端开发学院浏览量:

1、使用drawRunner()函数把跑步者给绘制出来

分析：其实drawRunner函数中主要是将三个参数（一个图像、左侧坐标和顶部坐标）向drawImage()传递，其中顶部坐标由跑步者所驻留的平台决定，而左侧坐标则是一个常数。

2、通过drawBackground（）背景函数绘制背景，drawPlatforms()函数绘制平台

分析：drawBackground() 函数在画布的 (0,0) 绘制背景图像。稍后，我会在本文中修改该函数，以便滚动背景。而绘制平台（它们不是图像）需要更广泛地使用 Canvas API。多用途的 drawImage() 方法您可以使用 Canvas 2D 上下文的 drawImage() 方法在画布内的任何地方绘制一个完整的图像，或图像内的任何矩形区域，有选择地沿着路线缩放图像。除了图像外，您还可以利用 drawImage() 绘制另一个画布或一个 video 元素当前帧的内容。这只是其中一个方法，但 drawImage() 还有助于便利地实现有趣的或者难以实现的应用程序（如视频编辑软件）。

其中的 JavaScript 定义一个名称为 platformData 的数组。该数组中的每个对象代表着描述一个独立平台的元数据。drawPlatforms() 函数使用 Canvas 上下文的 strokeRect() 和 fillRect() 方法来绘制平台矩形。这些矩形的特征存储在 platformData 数组内的对象中，用于设置上下文的填充风格和 globalAlpha 属性，该属性设置您之后在画布上绘制的任何图形的不透明度。调用 context.translate() 将画布的坐标系（如图 2 所示）在水平方向平移指定数量的像素。该平移和属性设置是临时的，因为这些操作是在 context.save() 和 context.restore() 调用之间执行的。

3、使用setInterval()和requestAnimationFrame()对动画的实现

    分析：从许多方面来看，HTML5 是程序员的乌托邦。没有专用的 API，开发人员使用 HTML5 在无处不在的浏览器中实现跨平台运行的应用程序。规范发展迅速，不断采用新技术，同时改进现有的功能。
           Polyfill：面向未来的编程过去，大多数跨平台软件都在最低的共同点实现。Polyfill 彻底颠覆了这一概念，它让您能够访问高级特性（如果它们可用），并在必要时回退到一个能力较低的实现。

           然而，新技术要实行规范，往往是通过特定浏览器现有的功能来实现的。浏览器厂商通常为这样的功能添加了前缀，使它们不会干扰其他浏览器的实现；例如，requestAnimationFrame() 最初被 Mozilla 实现为 mozRequestAnimationFrame()。然后 WebKit 实现了它，将其函数命名为 webkitRequestAnimationFrame()。最后，W3C 将它标准化为 requestAnimationFrame()。
          供应商提供了对前缀实现以及标准实现的不同支持，这使得新功能的使用变得非常棘手，所以 HTML5 社区发明了一种被称为 polyfill 的东西。Polyfill 针对特定功性确定浏览器的支持级别，如果浏览器已经实现了该功能，您就可以直接访问它，否则，浏览器会向您提供一个暂时尽量模仿标准功能的实现。Polyfill 易于使用，但实现起来可能比较复杂。清单 6 演示了 requestAnimationFrame() 的一个 polyfill 的实现：