Ausführliche Erklärung zum HTML5-Gerätezugriff

Referenzadresse

Verwenden Sie hauptsächlich den Eingabetyp = Datei und akzeptieren = Bild / * für die Verarbeitung

Bildvorschaumethoden (zwei Arten)

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

Referenzadresse

1. Touchstart
2. berühren
3. touchcancel wird durch fortgeschrittenere Ereignisse wie Telefonzugriff oder Popup-Informationen ausgelöst und ist im Allgemeinen ein Speichervorgang.
4. touchmove
5. Geolokalisierung

Referenzadresse

Beachten Sie, dass Google Chrome https benötigt, um Ortungsdienste bereitzustellen.

 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, // Pufferspeicher Timeout: 27000 // Wartezeit }) } else { Alert('Geolocation Not Supported!') }

Referenzadresse

 window.addEventListener('deviceorientation',(doe) => { this.absolute = doe.absolute //false bedeutet, dass die Orientierungsdaten durch das geräteeigene Koordinatensystem this.alpha = doe.alpha //um die Z-Achse bereitgestellt werden 0-360 beim Betreten Die horizontale Richtung des Mobiltelefons beträgt 0 oder 360 this.beta = doe.beta // Um ​​die X-Achse -180~180 beschreibt die Drehung von vorne nach hinten this.gamma = doe.gamma // Beschreibung der Drehung von links nach rechts um die Y-Achse -90~90}, true) // Chrome v65 unterstützt nur Beschleunigung, einschließlich Schwerkraft und Intervall (sollte aufgrund einiger Einschränkungen nicht gefunden werden) und die neuesten Versionen von Andere Browser unterstützen grundsätzlich window. addEventListener('devicemotion', (dme) => { this.acceleration = dme.acceleration this.accelerationInclusionGravity = dme.accelerationInclusionGravity this.rotationRate = dme.rotationRate this.interval = dme.interval }, false)

Referenzadresse

 <button onclick=lockPointer();>Sperren!</button> <div id=pointer-lock-element style=width:500px;height:500px;background-color: red></div>

 // Einfaches Beispiel, sperren Sie die Maus innerhalb des pointer-lock-element-Elements let = document.getElementById(pointer-lock-element); document.addEventListener(mousemove, function(e) { var MovementX = e.movementX MovementY = e. moveY //Den inkrementellen Wert der Mausbewegung ausgeben console.log(X= + MovementX, Y= + MovementY }, false); elem = document.getElementById(pointer-lock-element); elem.requestPointerLock ||.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.