PhoneGap实现重力感应
2024-09-03 01:58:47
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>phonegap_device_network_notification01</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="../cordova.js" type="text/javascript"></script>
<style type="text/css">
#ball {
position: absolute;
z-index: 0;
left: 20px;
top: 100px;
background: #f00;
}
</style>
<script type="text/javascript" charset="utf-8">
var watchID = null;
document.addEventListener("deviceready", onDeviceReady, false); function drawCircle(x,y) {
var ctx = document.getElementById("ball").getContext('2d');
var rd = 10;
ctx.beginPath();
ctx.arc(x, y, rd, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fillStyle = "yellow";
ctx.fill();
} function clear() {
var ctx = document.getElementById("ball").getContext('2d');
ctx.clearRect(0,0,200,200);
} function onDeviceReady() {
drawCircle(10,10);
startWatch();
} function startWatch() {
var options = { frequency: 40 }; watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
} function stopWatch() {
if (watchID) {
navigator.accelerometer.clearWatch(watchID);
watchID = null;
}
} var oldX = 10, oldY = 10;
// 获取加速度信息成功后的回调函数
function onSuccess(newValue) {
if(10<=oldX<180&&10<=oldY<180){
clear();
drawCircle(oldX,oldY);
}
oldX -= newValue.x;
oldY += newValue.y;
var element = document.getElementById('accelerometer');
element.innerHTML = 'X: ' + oldX + '<br />' +
'Y: ' + oldY + '<br />';
} // 获取加速度信息失败后的回调函数
function onError() {
alert('onError!');
} </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>PhoneGap100实战</h1>
</div>
<div data-role="content">
<div id="accelerometer">开启重力感应...</div>
<button onclick="stopWatch();">停止重力感应</button>
<canvas id="ball" width="200" height="200"></canvas>
</div>
<div data-role="footer">
<h4> </h4>
</div>
</div> </body>
</html>
最新文章
- PHP和HTML代码混合编译的三种方法
- validate插件深入学习-01 小白从看透一个插件开始
- cacti监控juniper路由器
- 【GOF23设计模式】策略模式
- nginx-upload-module模块实现文件断点续传
- [Angular2 Router] Build Angular 2 Navigation with routerLink
- Jquery 1.11.1 Checkbox checked 判断
- java_设计模式_工厂模式_Factory Pattern(2016-08-04)
- 使用超链接跳转页面(GridView)
- ThinkPHP - 查询语句
- Javascript DOM 03 表格添加、删除 + 搜索
- E: 无法获取锁 /var/lib/apt/lists/lock - open (11: Resource temporarily unavailable)解决方法
- 文本挖掘预处理之向量化与Hash Trick
- 【学习总结】Git学习-参考廖雪峰老师教程-总
- php 多维数组 array sort 排序 :array_multisort
- 1.Python基础知识小结:
- c++ 如何编写接口类(interface)
- JDBC报错记录
- 多线程中的信号机制--signwait()函数【转】
- OpenXml操作Word的一些操作总结.无word组件生成word.(转)