一、PhoneGap 加速计Accelerometer 对象介绍
主要方法
accelerometer.getCurrentAcceleration 获取当前设备在x，y，z 轴上的加速度信息
accelerometer.watchAcceleration 定期获取设备的加速度信息
accelerometer.clearWatch 停止定期获取设备的加速度信息
参数
accelerometerSuccess 获取加速度信息成功的回调函数
accelerometerError 获取加速度信息失败的回调函数
accelerometerOptions
一般为json 对象，frequency 是它目前的唯一参数，以毫秒数表示，用来指定定期获取
加速度信息频率
二、获取加速度信息
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Acceleration 例子</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
----------------------- Page 2-----------------------
// 等待PhoneGap 加载
document.addEventListener("deviceready", onDeviceReady, false);
// 加载完成
function onDeviceReady() {
navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
}
// 获取加速度信息成功后的回调函数
// 接收包含当前加速度信息的Acceleration 对象
function onSuccess(acceleration) {
alert('X 轴方向的加速度: ' + acceleration.x + '\n' +
'Y 轴方向的加速度: ' + acceleration.y + '\n' +
'Z 轴方向的加速度: ' + acceleration.z + '\n' +
'时间戳: ' + acceleration.timestamp + '\n');
}
// 获取加速度信息失败后的回调函数
function onError() {
alert('出错了!');
}
</script>
</head>
<body>
<h1>例子</h1>
<p>获取当前的加速度信息</p>
</body>
</html>
三．定期获取加速度信息
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Acceleration 例子</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
----------------------- Page 3-----------------------
// 当前watchAcceleration 的引用ID
varwatchID = null;
// 等待PhoneGap 加载
document.addEventListener("deviceready", onDeviceReady, false);
// 加载完成
function onDeviceReady() {
startWatch();
}
// 开始监测
function startWatch() {
// 每隔三秒更新一次信息
var options = { frequency: 3000 };
watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
}
// 停止监测
function stopWatch() {
if (watchID) {
navigator.accelerometer.clearWatch(watchID);
watchID = null;
}
}
// 获取加速度信息成功后的回调函数
// 接收包含当前加速度信息的Acceleration 对象
function onSuccess(acceleration) {
var element = document.getElementById('accelerometer');
element.innerHTML = 'X 轴方向的加速度: ' + acceleration.x + '<br />' +
'Y 轴方向的加速度: ' + acceleration.y + '<br />' +
'Z 轴方向的加速度: ' + acceleration.z + '<br />' +
'时间戳: ' + acceleration.timestamp + '<br />';
}
// 获取加速度信息失败后的回调函数
function onError() {
alert('onError!');
}
----------------------- Page 4-----------------------
</script>
</head>
<body>
<div id="accelerometer">监测加速度信息中...</div>
<button"stopWatch();">停止监测加速度信息</button>
</body>
</html>
四．摇一摇
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Acceleration 例子</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
varwatchID = null;
document.addEventListener("deviceready", onDeviceReady, false);
varoldValue = {
x: null,
y: null,
z: null
}
function onDeviceReady() {
startWatch();
}
function startWatch() {
var options = { frequency: 300 };
watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
}
function stopWatch() {
if (watchID) {
navigator.accelerometer.clearWatch(watchID);
----------------------- Page 5-----------------------
watchID = null;
}
}
// 获取加速度信息成功后的回调函数
function onSuccess(newValue) {
var changes = {},
bound = 3;
if (oldValue.x !== null) {
changes.x = Math.abs(oldValue.x, newValue.x);
changes.y = Math.abs(oldValue.y, newValue.y);
changes.z = Math.abs(oldValue.z, newValue.z);
}
if (changes.x> bound &&changes.y> bound &&changes.z>
bound) {
alert('检测到手机晃动');
}
oldValue = {
x: newValue.x,
y: newValue.y,
z: newValue.z
}
var element = document.getElementById('accelerometer');
element.innerHTML = 'Acceleration X: ' + newValue.x + '<br />' +
'Acceleration Y: ' + newValue.y + '<br />' +
'Acceleration Z: ' + newValue.z + '<br />' +
'Timestamp: ' + newValue.timestamp + '<br />';
}
// 获取加速度信息失败后的回调函数
function onError() {
alert('onError!');
}
</script>
</head>
<body>
<div id="accelerometer">监测加速度信息中...</div>
<button"stopWatch();">停止监测加速度信息</button>
</body>
</html>
----------------------- Page 6-----------------------
五．重力感应
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Acceleration 例子</title>
<style type="text/css">
#ball {
position: absolute;
z-index: 0;
left: 20px;
top: 100px;
background: #f00;
}
</style>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
varwatchID = null;
document.addEventListener("deviceready", onDeviceReady, false);
function drawCircle(x,y) {
varctx = document.getElementById("ball").getContext('2d');
varrd = 10;
ctx.beginPath();
ctx.arc(x, y, rd, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fillStyle = "yellow";
ctx.fill();
}
function clear() {
varctx = document.getElementById("ball").getContext('2d');
ctx.clearRect(0,0,200,200);
}
function onDeviceReady() {
drawCircle(10,10);
startWatch();
----------------------- Page 7-----------------------
}
function startWatch() {
var options = { frequency: 40 };
watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
}
function stopWatch() {
if (watchID) {
navigator.accelerometer.clearWatch(watchID);
watchID = null;
}
}
varoldX = 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 id="accelerometer">开启重力感应...</div>
<button"stopWatch();">停止重力感应</button>
<canvas id="ball" width="200" height="200"></canvas>
</body>
</html>
