<!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. Change - Why we need coding standards

    Change - Why we need coding standards I have the idea of coding standards when I have to review my t ...

  2. C# wx获取token基本方法

    #region 请求Url,不发送数据 /// <summary> /// 请求Url,不发送数据 /// </summary> public static string Re ...

  3. 【原创】MapReduce实战（一）

    应用场景: 用户每天会在网站上产生各种各样的行为,比如浏览网页,下单等,这种行为会被网站记录下来,形成用户行为日志,并存储在hdfs上.格式如下: 17:03:35.012ᄑpageviewᄑ{&qu ...

  4. Django之路由、模板和模型系统 (转载)

    一.路由系统 浏览器会自动给url后加一个“/” django会自动给路由的正则表达式前面加一个“/” django会给任何不带“/”结尾的url语句添加“/”(可设置) 短路路由规则:匹配到第一条就 ...

  5. nginx服务器绑定多个域名、支持pathinfo路由、隐藏index.php入口文件

    这篇文章仅仅是操作,解释说明部分待更新. 1. 修改nginx的配置文件(我的配置文件在/etc/nginx/nginx.conf) [root@xxx ~]# find / -name nginx. ...

  6. Bzoj1496: [NOI2006]千年虫

    题面 传送门 Sol 左右可以分开搞 然后就是要形成一个类似梳子的东西 设\(f[0/1][i][j]\) \(0\)凹,\(1\)凸,\(i\)为行,可以滚一维,\(j\)为该行长度 \(f[0][ ...

  7. PowerDesigner设置所有int主键自增脚本

    '*****************************************************************************dim model 'current mod ...

  8. Python基础-月考

    1. 8<<2等于? # 解释:将8按位左移2位 # 8 0 0 0 0 1 0 0 0 # 32 0 0 1 0 0 0 0 0 2. 通过内置函数计算5除以2的余数 print(div ...

  9. openlayers模仿google地图--地图版权随鹰眼关闭打开而改变位置

    额..题目有点长......今天有个群友问我.想实现google地图地图版权随鹰眼关闭状态改变位置的功能.就是这种<ignore_js_op> 打开鹰眼时  地图版权也随着鹰眼位置改变而改 ...

  10. 解决 spring cloud 项目的 com.netflix.hystrix.contrib.javanica.aop.aspectj.HystrixCommandAspect 错误信息

    在项目中引入:引入hystrix依赖,如下 <dependency> <groupId>org.springframework.cloud</groupId> &l ...