<!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>&nbsp;</h4>

        </div>

</div>

</body>

</html>

PhoneGap实现重力感应的更多相关文章

  1. cocos2dx 3.x(让精灵随着重力感应的方向移动而移动)

    // // GameScene.hpp // HelloWord // // Created by apple on 2017/1/7. // // #ifndef GameScene_hpp #de ...

  2. H5案例分享：html5重力感应事件

    html5重力感应事件 一.手机重力感应图形分析 1.设备围绕z轴的旋转角度为α,α角度的取值范围在[0,360). 设备在初始位置,与地球(XYZ)和身体(XYZ)某个位置对齐. 设备围绕z轴的旋转 ...

  3. 【Android开发学习笔记】【第九课】重力感应

    概念 使用重力感应技术的Android游戏已经屡见不鲜,不知道自己以后会不会用到,所以先研究了一下. 在网上学习了一下,貌似没有api,所以得自己去分析手机处在怎样状态下.注意: 下面提供的demo程 ...

  4. Cocos2D-X2.2.3学习笔记9(处理重力感应事件,移植到Android加入两次返回退出游戏效果)

    这节我们来学习Cocos2d-x的最后一节.怎样处理重力感应事件.移植到Android后加入再按一次返回键退出游戏等.我这里用的Android.IOS不会也没设备呃 效果图不好弄,由于是要移植到真机上 ...

  5. iOS 重力感应 学习1 陀螺仪 水平仪 指南针

    小球可以随着重力感应 四处乱撞. 放大了坐标位移 就可以看见小球动了. 然后规定小球的路径 当滑到中间时候 弹出一张图片 作为提示. 我做了一个小demo 效果不错哦 CMMotionManager ...

  6. 移动终端学习2：触屏原生js事件及重力感应

    如今智能移动设备已经渗透到人们生活的方方面面,用户数量也在不断迅速增长(市场研究机构 eMarketer 在今年初发表的趋势报告中预测,2014年至2018年,中国智能手机用户从总人口的 38.3%增 ...

  7. Android重力感应开发

    http://blog.csdn.net/mad1989/article/details/20848181 一.手机中常用的传感器 在Android2.3 gingerbread系统中,google提 ...

  8. 基于野火M3开发板（STM32F103VET6）的迷宫小球（重力感应控制）游戏开发

    2013-03-03 这是研一上学期<实时嵌入式系统实验>课程的大作业,是利用野火板的资源,加上一个AHRS(Attitude and Heading Reference System,姿 ...

  9. iOS设备的重力感应

    重力感应是每台iOS设备都具备的功能,所以在应用用好重力感应会有意想不到的效果 1.添加CoreMotion框架 2.在需要使用重力感应的类中添加头文件 #import <CoreMotion/ ...

随机推荐

  1. MySql的索引操作

    索引是一种特殊的数据库结构,可以用来快速查询数据库表中的特定记录.索引是提高数据库性能的重要方式.MySQL中,所有的数据类型都可以被索引.MySQL的索引包括普通索引.唯一性索引.全文索引.单列索引 ...

  2. Linux修改命令行样式

    Linux修改Shell命令提示符及颜色 Linux修改Shell命令提示符及颜色 1. Linux登录过程中加载配置文件顺序: /etc/profile → /etc/profile.d/*.sh ...

  3. 连接池连接mysql数据库 这故障在哪？

  4. MVVMLight - IOC Containers and MVVM

    在面向对象编程的早期,开发者要面对在应用程序或者类库中创建或检索类的实例的问题.针对这个问题有很多的解决方案.在过去几年中,依赖注入(DI)和控制反转(IoC)在开发者中很流行,并且取代了老的方案,比 ...

  5. js实现页面跳转的八种方式

    整理一下JavaScript八种跳转方式,欢迎评论补充! 第一种方法: <script> window.location.replace('http://www.cnblogs.com/c ...

  6. Java 基础（8）——流程控制

    上次的运算符都消化好了吗?每一天都要用到一些哦~ 以前有提到过一嘴,程序执行都是从上到下执行的,emm,学到这里,感觉这句话是对的也是错的了…… 如果都是一行一行执行下去的话,上节课的例子: 今天不上 ...

  7. Java温故而知新（7）Object类及其方法讲解

    一.java.lang.Object java.lang包在使用的时候无需显示导入,编译时由编译器自动导入. Object类是类层次结构的根,Java中所有的类从根本上都继承自这个类. Object类 ...

  8. jquery根据id取不到textarea对象，无法给textarea赋值

    小编定义了一个textarea控件,却无法根据id取到textarea对象并赋值. 经过实验,得出了原因.代码如下: <!DOCTYPE html><html><head ...

  9. VC++中出现错误“ error c2065 'printf' undeclared identifier”的处理方法

    原文:http://blog.csdn.net/panpan639944806/article/details/20135311 有两种可能: 1.未加头文件 #include <stdio.h ...

  10. python 数据结构应用