js手机端调用陀螺仪数据实现指南针和水平仪代码-html代码-BFW代码库

js手机端调用陀螺仪数据实现指南针和水平仪代码

代码语言：html

所属分类：其他

代码描述：js手机端调用陀螺仪数据实现指南针和水平仪代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>H5Compass</title>
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            width: 320px;
            height: 568px;
            overflow: hidden;
          }
          body {
            position: relative;
          }
          #compass, #gradienter {
            width: 320px;
            height: 568px;
            position: absolute;
            top: 0;
            left: 0;
            transition: left 218ms;
          }
          #gradienter {
            left: 320px;
          }
          .nav {
            list-style: none;
            padding-left: 0;
            position: absolute;
            top: 500px;
            left: 160px;
            margin-left: -15px;
          }
    
          .nav li {
            height: 8px;
            width: 8px;
            border-radius: 4px;
            background-color: rgba(255, 255, 255, .4);
            display: inline-block;
          }
          .nav li + li {
            margin-left: 10px;
          }
          .nav li.active {
            background-color: rgba(255, 255, 255, 1);
          }
    </style>
</head>

<body>
    <div id="compass"></div>
    <canvas id="gradienter" width="640" height="1136"></canvas>
    <ul class="nav">
        <li class="active"></li>
        <li></li>
    </ul>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/raphael.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/hammer.min.js"></script>
    <script type="text/javascript">
        // center point 160 215
// cross: length 140
// inner circle r 105
// outer circle r 125
// north length 58 width 5
// deg circle r 150

var compassPaper = Raphael('compass', 320, 568)
compassPaper.rect(0, 0, 320, 568).attr('fill', 'black')

var cross = compassPaper.set()
var crossStyle = {
  stroke: 'white',
  'stroke-width': 1
}
cross.push(
  compassPaper.path('M90 215L230 215').attr(crossStyle),
  compassPaper.path('M160 145L160 285').attr(crossStyle)
)
var northBar = compassPaper.path('M160 110L160 52').attr({
  stroke: 'white',
  'stroke-width': 4
})
var compass = compassPaper.set()
var strokeWidth
var billet
var degText
for (var i = 0; i < 360; i = i + 2) {
  if (i % 30 == 0) {
    strokeWidth = 2
    degText = compassPaper.text(160, 60, i).attr({
      fill: 'white',
      'font-size': '16px'
    }).transform('R' + i + ', 160, 215')
    degText.degPosition = i
    compass.push(degText)
  } else {
    strokeWidth = 1
  }
  billet = compassPaper.path('M160 110L160 93').attr({
    stroke: 'white',
    'stroke-width': strokeWidth
  }).transform('R' + i + ', 160, 215')
  billet.degPosition = i
  compass.push(
    billet
  );
}
['N', 'E', 'S', 'W'].forEach(function(direction, index) {
  var directionText = compassPaper.text(160, 128, direction).attr({
    fill: 'white',
    'font-size': '28px'
  }).transform('R' + index * 90 + ', 160, 215')
  directionText.degPosition = index * 90
  compass.push(directionText)
})
var redTriangle = compassPaper.path('M160 70L150 88L170 88Z').attr({
  fill: 'red',
  'stroke-width': 0
})
redTriangle.degPosition = 0
compass.push(redTriangle)

var alphaText = compassPaper.text(160, 440, '0°').attr({
  fill: 'white',
  'font-size': '64px'
})

var directionText = compassPaper.text(160, 480, 'N').attr({
  fill: 'white',
  'font-size': '16px'
})

function throttle(method, delay, duration) {
  var timer = null,
    begin = new Date();
  return function() {
    var context = this,
      args = arguments,
      current = new Date();;
    clearTimeout(timer);
    if (current - begin >= duration) {
      method.apply(context, args);
      begin = current;
    } else {
      timer = setTimeout(function() {
        method.apply(context, .........完整代码请登录后点击上方下载按钮下载查看