• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML5 device access 设备访问详解

    camera api (含图片预览)

    参考地址

    主要为利用input type=file, accept="image/*" 进行处理

    图片预览方式(两种)

    const file = e.target.files[0]
    // 方式1 
    const url1 = window.URL.createObjectURL(file);
    let url2
    
    // 方式2
    const reader = new FileReader();
    reader.onload = (e) => {
        url2 = e.target.result;
    };
    reader.readAsDataURL(file);
    
    

    touch events (触屏事件)

    参考地址

    1. touchstart
    2. touchen
    3. touchcancel 电话的接入或者弹出信息等比较高级的事件触发,一般做保存操作
    4. touchmove
    5. geolocation

    参考地址

    注意谷歌浏览器要https才能提供定位服务

        if (navigator.geolocation){
            navigator.geolocation.getCurrentPosition((position) => {
                this.geolocation = `latitude:${position.coords.latitude},longitude:${position.coords.longitude}`
            }, (err) => {
                console.log(err);
            }, {
                    enableHighAccuracy: true, 
                    maximumAge        : 30000,  // buffer memory timre
                    timeout           : 27000   // waiting time 
            })
        } else {
            alert('geolocation not supported!')
        }
    

    device orientation and motion

    参考地址 

        window.addEventListener('deviceorientation',(doe) => {
            this.absolute = doe.absolute //false 表示方向数据由设备本身坐标系提供
            this.alpha = doe.alpha // 绕Z轴0-360 进入时手机水平正对的方向为0或360
            this.beta = doe.beta // 绕X轴-180~180 描述由前向后旋转
            this.gamma = doe.gamma // 绕Y轴-90~90 描述由左向右旋转
        }, true)
    
        // chrome v65 只支持accelerationIncludingGravity和interval(应该因为一些限制没有找到),其它浏览器最新版基本都支持
        window.addEventListener('devicemotion', (dme) => {
            this.acceleration = dme.acceleration
            this.accelerationIncludingGravity = dme.accelerationIncludingGravity
            this.rotationRate = dme.rotationRate
            this.interval  = dme.interval 
        }, false)
    
    

    Pointer Lock(鼠标锁定)

    参考地址 

        <button onclick="lockPointer();">锁住它!</button>
        <div id="pointer-lock-element" style="width:500px;height:500px;background-color: red"></div>
        // 简单示例,将鼠标锁定在 pointer-lock-element 元素内
        let = document.getElementById("pointer-lock-element");
        
        document.addEventListener("mousemove", function(e) {
            var movementX = e.movementX 
                movementY = e.movementY
    
            // 打印鼠标移动的增量值。
            console.log("X=" + movementX, "Y=" + movementY);
        }, false);
    
        function lockPointer() {
            elem = document.getElementById("pointer-lock-element");
            elem.requestPointerLock = elem.requestPointerLock    ||
                                elem.mozRequestPointerLock ||
                                elem.webkitRequestPointerLock;
            elem.requestPointerLock();
        }
    
    

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    上一篇:详解canvas在圆弧周围绘制文本的两种写法
    下一篇:html5-canvas中使用clip抠出一个区域的示例代码
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    HTML5 device access 设备访问详解 HTML5,device,access,设备,访问,