国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > HTML5 > 正文

HTML5 device access 設備訪問詳解

2024-09-05 07:19:23
字體:
來源:轉載
供稿:網友

camera api (含圖片預覽)

參考地址

主要為利用input type=file, accept="image/*" 進行處理

圖片預覽方式(兩種)

const file = e.target.files[0]// 方式1 const url1 = window.URL.createObjectURL(file);let url2// 方式2const 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();    }

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 西吉县| 鹤岗市| 会宁县| 吉隆县| 定南县| 娄底市| 商洛市| 灵武市| 类乌齐县| 蒙阴县| 高阳县| 岳池县| 扶绥县| 彭州市| 广水市| 阿拉尔市| 黑龙江省| 昌都县| 新源县| 泗阳县| 南华县| 屯门区| 鸡泽县| 玉溪市| 望谟县| 湟源县| 海南省| 仙居县| 广平县| 金川县| 丽江市| 曲沃县| 宁都县| 宜宾市| 隆回县| 于田县| 北宁市| 治县。| 海城市| 清苑县| 涪陵区|