drawBackground() 函数在画布的 (0,0) 绘制背景图像。稍后，我会在本文中修改该函数，以便滚动背景。而绘制平台（它们不是图像）需要更广泛地使用 Canvas API。多用途的 drawImage() 方法您可以使用 Canvas 2D 上下文的 drawImage() 方法在画布内的任何地方绘制一个完整的图像，或图像内的任何矩形区域，有选择地沿着路线缩放图像。除了图像外，您还可以利用 drawImage() 绘制另一个画布或一个 video 元素当前帧的内容。这只是其中一个方法，但 drawImage() 还有助于便利地实现有趣的或者难以实现的应用程序（如视频编辑软件）。查看全文>>
drawRunner函数中主要是将三个参数（一个图像、左侧坐标和顶部坐标）向drawImage()传递，其中顶部坐标由跑步者所驻留的平台决定，而左侧坐标则是一个常数查看全文>>
既然图形和动画的先决条件已经得到满足，那么现在是时候让 Snail Bait 动起来了。首先，我在游戏的 HTML 中让 requestNextAnimationFrame() 包含 JavaScript。startGame() 函数由背景图像的 onload 事件处理器调用，该函数通过调用 requestNextAnimationFrame() polyfill 启动游戏。在绘制游戏的第一个动画帧时，浏览器会调用 animate() 函数。查看全文>>
HTML5 中video标签是用来对视频文件播放的，而我们的视频文件大多数格式的都是以flv后缀或者是mp3和MP4结尾的。不过有时候发现在html网页中，一般情况下，MP4或者MP3格式的视频都不能播放。因此，我们巧妙的借助HTML5 的video标签。就可以正常播放MP4的视频了。查看全文>>
针对main.css改进型模仿 大多数人推荐使用normalize.css重置默认样式,我们今天给大家演示一个main.css改进型模型。查看全文>>
最近因为有需要开发互动式网页，而且又需要频繁地和server端坐沟通，所以除了ajax之外，也开始研究一些新的东西；而其中一个，就是可以更节省频宽的WebSocket、这个HTML 5的通讯方法了～ 关于WebSocket的介绍，建议庆直接参考维基百科，或是WebSocket.org的介绍；完整的API则可以参考W3C的网页。在Heresy来看，WebSocket和传统的HTML数据取得的方法相比，最大的好处，就是由于WebSocket是建立一个持续性的连线，不需要重复地不断建立连线，所以可以有效地降低延迟、并且减少数据的传输辆。 像右图就是WebSocket.org所提供的示意图，可以看到随着要求存取的次数的增加，传统的「Polling」的数据存取方法所需的频宽会上升地非常地快；相较之下，WebSocket的频宽则可以省非常地多。查看全文>>
