HTML5怎么制作一个重力感应球

这篇“HTML5怎么制作一个重力感应球”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“HTML5怎么制作一个重力感应球”文章吧。

创新互联是专业的中山网站建设公司，中山接单;提供成都网站设计、成都做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行中山网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

重力传感器是一个非常常见的内置在智能手机等移动设备中的传感器，基本作用就是获得移动设备的重心。当移动设备倾斜或翻转时，重心会发生变化，而重力传感器将如实地记录下重心变化的过程并通过数据反映出来。

由于安全问题，浏览器可能会默认关闭一些配置，因此读者需要从欧朋浏览器地址栏中输入opera:config后回车，找到需要的相关参数，进行调整

如果你在测试时，发现无法监测到deviceorientation传出来的值，有可能是因为关闭了对deviceorientation的支持，那你可以试着照上图所示的方式，在地址栏中输入opera:config，回车，然后找到Orientation选项并勾选上

1. 了解重力传感器

传感器是移动互联网Web App开发中非常重要的一个设备，涉及多个应用概念。在HTML5的Device API中，DeviceOrientation事件规范提供了3个DOM事件，分别是：deviceorientation、compassneedscalibration和devicemotion。本节主要讲解的是deviceorientation。

DeviceOrientation规范定义的是返回alpha、beta和gamma三个值，如下面的代码所示：

window.addEventListener("deviceorientation", function(event){

//返回值event.alpha、event.beta、event.gamma

}, true);

当设备水平放在桌面上时，其event返回的值如下：

{alpha: 90,

beta: 0,

gamma: 0};

而此时，其设备的朝向值应为360-alpha（当设备翻转时，以此公式为基础进行朝向运算），

当设备的转动变成以x轴为中心自转时，其event返回的值如下：

{alpha: 90,

beta: 90,

gamma: 0};

当设备的转动变成以z 轴为中心自转时，则alpha值发生变化，

当设备的转动变成以y 轴为中心自转时，则gamma值发生变化，

当DeviceOrientation规范的Devicemotion事件的加速度计还允许有重力时，则会出现：

{x: 0,

y: 0,

z: 9.81};

而这时，如果设备处于自由落体的情况时，它的值应该是：

{x: 0,

y: 0,

z: -9.81};

如果设备在高速行驶的汽车中时，它的值应该是（这是复杂应用，目前还没有良好的支持，

有兴趣的读者可以继续深入研究）：

{acceleration: {x: v^2/r, y: 0, z: 0},

accelerationIncludingGravity: {x: v^2/r, y: 0, z: 9.81},

rotationRate: {alpha: 0, beta: 0, gamma:-v/r*180/pi} };

2. 重力感应球示例

为了让读者更好地了解重力传感器，建立起感性的认识，我们通过重力感应球的示例来展示重力传感器的开发过程和技巧。

重力传感器示例的代码如代码如下：