<!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. hibernate 学习笔记2

    1.Criteria查询接口适用于组合多个限制条件来搜索一个查询集. 要使用Criteria,需要遵循以下步骤: *创建查询接口: Criteria criteria=session.createCr ...

  2. springmvc4集成swagger2

    首先在原有的springmvc工程的pom文件中增加swagger <dependency> <groupId>io.springfox</groupId> < ...

  3. 添加jquery脚本文件

    对于后台添加JQuery需要加上../js {insert_scripts files ="../js/jquery.1.14.min.js"}

  4. FusionCharts数据展示成饼状图、柱状图和折线图

    FusionCharts数据展示成饼状图.柱状图和折线图 本文以展示柱状图为例进行介绍,当然这仅仅是一种方法而已:还有很多方法可以用于展示图表,例如echarts,自定义图表标签.使用jfreecha ...

  5. javascrapy 正则表达式验证 IP和MAC

    var psrc = $('input[name="psrc"]').val() var hwsrc = $('input[name="hwsrc"]').va ...

  6. RabbitMQ基础--总结

    一. RabbitMQ的五种工作场景: 1. 单发单收 2. 单发送多接收 +++++++++++++++++++++前面两种没有使用exchange++++++++++++++++++ 3. Pub ...

  7. 怎样关闭占用80端口的pid为4的进程

    我也被这个问题给纠结了好几天.重装系统都三次了.终于找到原因了:我用的是sqlserver 2008;解决方法:window-sqlserver 2008-配置工具-sqlserver 配置管理器 找 ...

  8. Luogu1261: 服务器储存信息问题

    题面 传送门 Sol 我们可以考虑每种\(rank\)的点\(u\)会被哪些点\(v\)感兴趣 如果\(dis[u][v]<\)所有满足\(rank\)大于\(rank[u]\)的点到\(v\) ...

  9. 类中调用界面ActiveX控件报错当前线程不在单线程单元中因此无法实例化 ActiveX 控件的解决办法

    解决办法是Form类中定义一个静态的ActiveX对象,在formload中将界面上的ActiveX对象赋值给新定义的对象,类中访问该静态对象即可. public static AxClientDri ...

  10. C语言--清理getchar缓存

    getchar()采用了缓冲区,而getch()才是立即获取,所以要想再用getchar()获取正确的值必须先清空缓冲区,如果是windows操作系统,用fflush(stdin)函数或rewind( ...