织梦CMS - 轻松建站从此开始!

澳奇眼镜道具厂_丹阳国际眼镜城平台

当前位置: 主页 > 网页基础 >

HTML5利用现代设备传感器轻松地提供高级的Web用户

时间:2021-07-08 07:21来源: 作者: 点击:
今天,我们在 HTML5Labs.com 上发布了 W3C DeviceOrientation 事件规范草稿的原型实施。此规范定义了提供设备的物理方向和运动相关信息的新 DOM 事件。此类 API 将允许 Web 开发者利用现代设备的
今天,我们在 HTML5Labs.com 上发布了 W3C DeviceOrientation 事件规范草稿的原型实施。此规范定义了提供设备的物理方向和运动相关信息的新 DOM 事件。此类 API 将允许 Web 开发者利用现代设备的传感器轻松地提供高级的 Web 用户体验。
开发者获益
利用设备方向 API,开发者可以探索游戏的新输入机制、应用程序的新笔势(例如“摇晃以清屏”或“倾斜以缩放”)或者甚至放大实际体验。原型的安装包括一个示例游戏,帮助您开始了解 API。

该视频以动态形式说明本博文中介绍的概念。
如何工作
设备方向 API 公开了两种不同类型的传感器数据:方向和运动。
当设备的物理方向变化时(例如用户倾斜或旋转设备),将会在窗口触发 deviceorientation 事件,并提供旋转的 alpha、beta 和 gamma 角度(以度表示): 显示由与 3D X、Y 和 Z 轴相关的 deviceorientation 事件返回的旋转的 alpha、beta 和 gamma 角:alpha = 绕 Z 轴旋转、beta = 绕 X 轴旋转和 gamma = 绕 Y 轴旋转。 <div id="directions"></div>
<script>
window.addEventListener("deviceorientation", findNorth);
function findNorth(evt) {
var directions = document.getElementById("directions");
if (evt.alpha < 5 || evt.alpha > 355) {
directions.innerHTML = "North!";
} else if (evt.alpha < 180) {
directions.innerHTML = "Turn Left";
} else {
directions.innerHTML = "Turn Right";
}
}
</script>

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容