<!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. ACS蚁群算法求解对称TSP旅行商问题的JavaScript实现

    本来以为在了解蚁群算法的基础上实现这道奇怪的算法题并不难,结果实际上大相径庭啊.做了近三天时间,才改成现在这能勉强拿的出手的模样.由于公式都是图片,暂且以截图代替那部分内容吧,mark一记. 1 蚁群 ...

  2. org.springframework.web.util.NestedServletException: Request processing failed; nested exception is org.springframework.beans.BeanInstantiationException: Failed to instantiate [org.jboss.resteasy.plug

    之前做的项目是resteasy的上传,代码没有问题,断点都不进来呢. 我以为可以直接移植到SpringMVC,但是SpringMVC不支持MultipartFormDataInput , 用Multi ...

  3. EveryThing 使用方法

    1.按照时间范围:datetimed: <*.doc|*.docx>  dm:1/2015-6/2015// 如果本地的时间设置是年份在前,那么把年份放在月份前面// d: <*.d ...

  4. svn 不能校验路径“XXX”的锁；没有匹配的可用锁令牌 故障解决方法

    原文出自:https://blog.csdn.net/seesun2012 故障现象: svn Commit ,失败,提示: 不能校验路径"/SEESUN/****系统计划说明书.docx& ...

  5. 创建WPF用户控件

    wpf用户自定义控件和winform创建方法类似,这里先纠正一个误区,就是有很多人也是添加,然后新建,然后是新建用户控件库,但是为什么编译好生成后Debug目录下还是只有exe文件而没有dll文件呢? ...

  6. 在 Azure 上创建和链接 Azure SQL 数据库

    本快速入门介绍了如何在 Azure 门户中创建并连接 Azure SQL 数据库.在本教程中完成的所有操作均符合 1 元试用条件. 开始之前 如果您还没有 Azure 账户,可以申请 1 元试用账户. ...

  7. Gradle sync failed: Cause: org.gradle.logging.StyledTextOutput$Style Consult IDE log for more details

    环境 Android studio 3.0 导入开源中国: ... dependencies { //noinspection GradleDependency classpath 'com.andr ...

  8. es入门教程

    因为项目可能会用到es保存一些非结构化的数据,并从中检索数据.对es调研了一下 从官网:https://www.elastic.co/downloads下载,解压即安装. 进入解压目录,执行bin目录 ...

  9. 小白学flask之hello，world

    from flask import Flask app = Flask(__name__) @app.route("/") def hello(): return "He ...

  10. EasyUI combobox 多选及回显赋值

    multiple boolean 决定是否支持多项选择. $('#cc').combobox({ url:'combobox_data.json', multiple:true, //支持多选 val ...