js实现h5调用手机陀螺仪实现指南针效果代码-html代码-BFW代码库

js实现h5调用手机陀螺仪实现指南针效果代码

代码语言：html

所属分类：其他

代码描述：raphael+hammer实现h5调用手机陀螺仪实现指南针效果代码，电脑上没有陀螺仪，所以请在手机上打开观看效果。

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

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

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>


<div id="compass"></div>
<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>
    //计算屏幕宽度 高度
        var pageWidth = window.innerWidth;
        var pageHeight = window.innerHeight;
        if (typeof pageWidth != "number") {
            if (document.compatMode == "CSS1Compat") {
                pageWidth = document.documentElement.clientWidth;
                pageHeight = document.documentElement.clientHeight;
            } else {
                pageWidth = document.body.clientWidth;
                pageHeight = document.body.clientHeight;
            }
        }
        var zoom = 1;
        //compass div 宽高
        var paperWidth = 300;
        var paperHeight = 300;
        var crLong = 130 * zoom;
        var crShort = 100 * zoom;
        var cdiff = paperHeight / 2 - crLong;
        var initX = (pageWidth - paperWidth) > 0 ? (pageWidth - paperWidth) / 2 : 0;
        var initY = (pageHeight - paperHeight) > 0 ? (pageHeight - paperHeight) / 2 : 0;
        document.getElementById("compass").style.marginTop = initY + "px";
        document.getElementById("compass").style.marginLeft = initX + "px";

        //创建画布
        var compassPaper = Raphael(initX, initY, paperWidth, paperHeight)
            //画园
        compassPaper.circle(paperWidth / 2, paperHeight / 2, crLong).attr('fill', 'black');

        var cross = compassPaper.set()
        var crossStyle = {
                stroke: 'white',
                'stroke-width': 1
            }
            //指南针画十字
        var pathlineX = 'M' + (paperWidth / 2 - crShort / 2) + ' ' + (paperHeight / 2) + 'L' + (paperWidth / 2 + crShort / 2) + ' ' + (paperHeight / 2);
        var pathlineY = 'M' + (paperWidth / 2) + ' ' + (paperHeight / 2 - crShort / 2) + 'L' + (paperWidth / 2) + ' ' + (paperHeight / 2 + crShort / 2);
        var northline = 'M' + (paperWidth / 2) + ' ' + (paperHeight / 2 - crShort) + 'L' + (paperWidth / 2) + ' ' + (crLong - crShort);

        cross.push(
                compassPaper.path(pathlineX).attr(crossStyle),
                compassPaper.path(pathlineY).attr(crossStyle)
            )
            //指北线
        var northBar = compassPaper.path(northline).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(paperWidth / 2, (paperHeight / 2 - crShort) * 4 / 5, i).attr({
                    fill: 'white',
                    'font-size': '16rem'
                }).transform('R' + i + ', ' + paperWidth / 2 + ', ' + paperHeight / 2)
                degText.degPosition = i
                compass.push(degText)
            } else {
                strokeWidth = 1
            }
            billet = compassPaper.path('M' + paperWidth / 2 + ' ' + (paperHeight / 2 - crShort) + 'L' + paperWidth / 2 + '  ' + (paperHeight / 2 - crShort + crShort / 5)).attr({
                stroke: 'white',
                'stroke-width': strokeWidth
         .........完整代码请登录后点击上方下载按钮下载查看