几种不常用Web API（振动、重力感应、联网状态、系统电量信息、页面可见性、canvas转base64、监听屏幕旋转、元素全屏显示）

内容介绍

  navigator对象中有一些不常用的API，以下主要介绍vibrate振动,deviceorientation重力感应,online联网状态，getBattery系统电量信息，visibilitychange页面可见性，toDataURL（canvas转base64），orientationchange监听屏幕旋转和fullScreen元素全屏显示。

一、vibrate振动

1、判断设备是否支持振动

// 判断设备是否支持振动（部分浏览器不支持）——vibrate
var vibrateStatus = window.navigator.vibrate();

2、单次震动

// 单次震动200ms
window.navigator.vibrate(200);
window.navigator.vibrate([200]);

3、间接振动

// 间接振动（振动100ms,暂停200ms,继续振动300ms,暂停400ms...,奇数振动,偶数暂停）
window.navigator.vibrate([100, 200, 300, 400]);

4、停止振动

// 停止振动（空白,[0]或数组全部为0）
window.navigator.vibrate();
window.navigator.vibrate([0]);
window.navigator.vibrate([0, 0, 0]);

5、持续振动

// 持续振动（使用setInterval和clearInterval控制开始和停止）
var vibrateInterval;

function startVibrate(duration) {
    navigator.vibrate(duration);
}

function stopVibrate() {
    if (vibrateInterval) clearInterval(vibrateInterval);
    navigator.vibrate(0);
}

function startPeristentVibrate(duration, interval) {
    vibrateInterval = setInterval(function() {
        startVibrate(duration);
    }, interval);
}

二、deviceorientation重力感应

// 重力感应方向输出——deviceorientation
if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation", function(event) {
        // alpha: 在Z轴上的角度
        var rotateDegrees = event.alpha;
        // gamma: 从左到右
        var leftToRight = event.gamma;
        // beta: 从前到后的运动
        var frontToBack = event.beta;
        handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
    }, true);
}
var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) {
    // TODO
};

三、online浏览器联网状态

1、获取当前联网状态

// 获取当前联网状态
if (navigator.onLine) {
    alert('online')
} else {
    alert('offline');
}

2、监听联网变化状态

// 监听联网变化状态
window.addEventListener("offline", function(e) {
    alert("offline");
})
window.addEventListener("online", function(e) {
    alert("online");
})

四、getBattery系统电量信息

  getBattery提供系统电量信息，返回一个battery的promise对象，然后resolve得到BatteryManager对象

// getBattery提供系统电量信息，返回一个battery的promise对象，然后resolve得到BatteryManager对象
navigator.getBattery().then(function(battery) {　　
    console.log(battery)
        // 布尔值，当前是否正在充电
    let charging = battery.charging,
        // 数字，代表距离充电完毕还剩多少秒， 0 为充电完毕
        chargingTime = battery.chargingTime,
        // 数字， 代表距离电池耗空并挂起还需多少秒
        dischargingTime = battery.dischargingTime,
        // 代表电量，0.0-1.0
        level = battery.level;

    // 电池充电状态更新时调用
    battery.addEventListener('chargingchange', function() {
            alert(battery.charging ? '在充电' : '没在充电')
        })
        // 电池充电时间更新时触发
    battery.addEventListener('chargingtimechange', function(info) {
            console.log(info)
        })
        // 电池断开充电时间更新时触发
    battery.addEventListener('dischargingtimechange', function(info) {
            console.log(info)
        })
        // 电池电量更新时触发
    battery.addEventListener('levelchange', function(info) {
        console.log(info)
    })
});

五、visibilitychange页面可见性

// 页面可见性：
document.addEventListener("visibilitychange", function() {
    document.title = document.hidden ? "用户离开了" : "用户回来了";
});

六、toDataURL（canvas转base64）

<canvas width="200" height="500"></canvas>

let canvas = document.querySelector('canvas');
let pen = canvas.getContext('2d');
pen.lineTo(100, 50);
pen.lineTo(150, 100);
pen.lineTo(100, 100);
pen.lineTo(100, 50);
pen.lineTo(100, 300);
pen.lineTo(80, 300);
pen.lineTo(50, 330);
pen.lineTo(150, 330);
pen.lineTo(120, 300);
pen.lineTo(100, 300);
pen.strokeStyle = 'red';
pen.stroke();
var img = document.createElement("img");
img.src = canvas.toDataURL("image/png");
// 输出base64
console.log(img.src);

七、orientationchange监听屏幕旋转

window.addEventListener("orientationchange", () => {
    document.body.innerHTML += `<p>屏幕旋转后的角度值：${window.orientation}</p>`;
}, false);

可结合vconsole在移动端进行测试，使用方法如下：

移动端调试工具vconsole使用方法：https://blog.csdn.net/cainiaoyihao_/article/details/115461949

<!-- 引入vconsole -->
<script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>

// 初始化
var vConsole = new VConsole();

完整代码：

<body>
    <!-- 引入vconsole -->
    <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>
    <script>
        // 初始化
        var vConsole = new VConsole();

        window.addEventListener("orientationchange", () => {
            console.log(window.orientation);
            document.body.innerHTML += `<p>屏幕旋转后的角度值：${window.orientation}</p>`;
        }, false);
    </script>
</body>

八、fullScreen元素全屏显示

// Esc退出全屏状态
// document.documentElement.webkitRequestFullScreen();
document.getElementById("csdn-toolbar").webkitRequestFullScreen();

注：
  部分浏览器不支持，注意兼容性

标签：javascript，navigator，振动，重力感应，联网状态，系统电量，页面可见性，canvas转base64，监听屏幕旋转，元素全屏显示

更多演示案例，查看 案例演示

欢迎评论留言!