HTML5デバイスアクセス デバイスアクセス詳細説明

参照アドレス

主に input type=file、accept=image/* を使用して処理します

画像のプレビュー方法（2種類）

 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);

参照アドレス

1. タッチスタート
2. タッチン
3. touchcancel は、電話アクセスやポップアップ情報などのより高度なイベントによってトリガーされ、通常は保存操作です。
4. タッチムーブ
5. 地理位置情報

参照アドレス

Google Chrome が位置情報サービスを提供するには https が必要であることに注意してください。

 if (navigator.geolocation){ navigator.geolocation.getCurrentPosition((position) => { this.geolocation = `latitude:${position.coords.latitude},longitude:${position.coords.longitude}` }, (err ) => { console.log(err) }, {enableHighAccuracy: true, minimumAge : 30000, // バッファー メモリtimre timeout : 27000 // 待機時間 }) } else {alert('地理位置情報はサポートされていません!') }

参照アドレス

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 は、Gravity を含む加速度および間隔 (いくつかの制限により見つからないはずです) と、その他の最新バージョンのみをサポートします。ブラウザは基本的に window をサポートしています。 addEventListener('devicemotion', (dme) => { this.acceleration = dme.acceleration this.accelerationclusionGravity = dme.accelerationincludeGravity 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. moveY //マウスの動きの増分値を出力します console.log(X= + motionX, Y= + motionY) }, false); elem = document.getElementById(pointer-lock-element); elem.requestPointerLock || elem.webkitRequestPointerLock();

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。