在游戏中发挥HTML5 Canvas的潜能(2)_H5之家 - 中国HTML5教程资源分享第一站

JavaScript 提供了 Math.round, Math.floor 甚至 parseInt 来转换数值。但是这个方法做了一些额外的工作（比如检测数据是不是有效的数值， parseInt 甚至先将参数转换成了字符串!）。在我的rendering loop里面，我需要一个更快的转换方法。

在我的旧的汇编代码里面，我使用了一个小技巧：将数据右移0位。这会将浮点数从浮点寄存器移到整数寄存器，并且是通过硬件转换的。右移0位不会改变数据的值，但是会以整数形式返回。

原始代码如下：

u = parseInt((u < 0) ? texture.width + (u % texture.width) : (u >= texture.width) ? u % texture.width : u);

以下是改进后的代码：

u = ((u < 0) ? texture.width + (u % texture.width) : (u >= texture.width) ? u % texture.width : u) >> 0;

当然该方法要求你的数据是合法的数值。

最终结果

实现了上述优化之后得到的结果如下：

你可以看到做了这些基本的功能优化之后的表现。

原始的隧道渲染（没做任何优化）：

做完上述优化之后：

下表展示了每项优化对帧速率的影响（在我的机器上）：

更进一步

记住这些关键技巧，你就可以为现代浏览器或Windows8制作实时、快速、流畅的游戏了。

原文链接： Unleash The Power of HTML5′s Canvas For Gaming

相关 [游戏 html5 canvas] 推荐：

25 超棒的 HTML5 Canvas 游戏 - 迎客松 - LinuxEden开源社区-Linux伊甸园

Canvas 元素作为HTML5标准的一部分，允许你通过脚本动态渲染点阵图像. 这是为了基于浏览器的矢量图形而设计. HTML Canvas 把一个绘图 API 展现给 JS 客户端，使得脚本能够把想绘制的东西都绘制到一块画布上. 阅读全文 | 邮件推荐 | 评论回复.

html5 canvas入门 - - Marshal's Blog

可以把canvas看做div，不过，它的长和宽不能通过css来定义，要使用标签属性：. 或者javascript对象属性设置：. 使用canvas，只有一种操作方式，使用javascript. 获得canvas对象的上下文对象，该对象是操作canvas的主要对象：. 使用canvas画最简单的线，点击运行示例，结果看起来是这样：. context.moveTo(100, 100);//移动到起点. context.lineTo(1024-100, 768-100);//从起点划线到端点. context.lineWidth = 10;//线的宽度.

在游戏中发挥HTML5 Canvas的潜能 - - Web App Trend

目前，支持HTML 5的浏览器和Windows 8 Metro成为了游戏开发的候选方案. 利用canvas（画布）可以实现硬件加速，你可以在上面绘制游戏的内容，通过一些技巧可以达到每分钟 60 帧的渲染速度. 在游戏中，fluidity（流畅性）这一概念非常重要，因为好的流畅性能带给玩家更好的体验. 这篇文章的主旨在于教你一些技巧，让你可以最大程度地发挥HTML5 canvas的潜能. 我将通过一个例子来表达我要讲的内容. 这个例子是2D tunnel effect（2D隧道效应），它是我为Coding4Fun 会议写的（我参加了在法国举办的TechDays 2012）. 早在80年代，当我还是一个年轻的demomaker的时候曾受到一些Commodore AMIGA代码的启发，从而写了这个2D tunnel effect.

备份：html5 canvas cheat sheet - - 膘叔

纯备份资料,HTML5的canvas资料.

html5 canvas 图像处理 - - HTML5研究小组