当前位置: 首页 > Web前端 > HTML5

使用h5、chart.js监控手机三轴加速度研究计步算法等

时间:2023-04-05 00:24:58 HTML5

使用window.DeviceMotionEvent判断手机浏览器是否支持访问硬件资源,window.addEventListener('devicemotion',deviceMotionHandler,false);使用前面的代码监听事件,第一个参数是事件类型,第二个参数是一个函数的事件处理。函数中始终通过varacceleration=eventData.accelerationIncludingGravity获取加速器对象;x=加速度.x;y=加速度.y;z=加速度.z;分别获取传感器三个元件的参数这样就完成了参数的获取。接下来,我们开始获取图表上的数据:首先,我们定义几个变量:varoriValuesX=[];//存储x轴数据varoriValuesY=[];//存储y轴数据varoriValuesZ=[];//存储z轴数据varoriValuesSqrt=[];//存储xyz平方和和根数据vartimeX=[];//存储图表x轴时间,单位:毫秒varx=y=z=0;//用于获取xyz轴当前数据varstartTime=newDate().getTime();//初始开始时间,单位:毫秒varstring='';//定义一个字符串来显示数据然后,开始调用加速度传感器:当前时间vardiffTime=currTime-startTime;//当前时间减去初始时间得到当前时间差timeX.push(diffTime);//存储当前时间差varacceleration=eventData.accelerationInc泸定重力;//获取加速器对象x=acceleration.x;//获取当前x轴的加速度y=acceleration.y;//获取当前y轴加速度z=acceleration.z;//获取z轴当前加速度oriValuesX.push(x);//存储x轴的当前加速度oriValuesY.push(y);//存储当前y轴加速度oriValuesZ.push(z);//存储z轴当前加速度oriValuesSqrt.push(Math.sqrt(x*x+y*y+z*z));//加上当前xyz加速度的平方,存为根if(timeX.length==200){//控制数line();//调用线函数,for(vari=0;i

但是这个必须要在手机上运行才有数据,因为现在的电脑浏览器无法模拟加速,附上效果图: