HTML5 device access 裝置存取詳解

參考地址

主要為利用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);

參考地址

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}` }, (errerr ) => { console.log(err); }, { enableHighAccuracy: true, maximumAge : 30000, // buffer memory timre timeout : 27000 // waiting time }) } else { alert('geolocation not supported!') }

參考地址

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)

參考地址

<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 // 印出滑鼠移動的增量值。 movementY); }, false); function lockPointer() { elem = document.getElementById(pointer-lock-element); elem.requestPointerLock = elem.requestPointerLock || elem.mozRequestPointerLock || }

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