Explicação detalhada do acesso ao dispositivo HTML5

Endereço de referência

Principalmente usando input type=file, accept=image/* para processamento

Métodos de visualização de imagem (dois tipos)

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

Endereço de referência

1. touchstart
2. tocar
3. touchcancel é acionado por eventos mais avançados, como acesso ao telefone ou informações pop-up, e geralmente é uma operação de salvamento.
4. toque em movimento
5. geolocalização

Endereço de referência

Observe que o Google Chrome requer https para fornecer serviços de localização.

 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 de memória timeout de timre: 27000 // tempo de espera }) } else { alert('geolocalização não suportada!') }

Endereço de referência

 window.addEventListener('deviceorientation',(doe) => { this.absolute = doe.absolute //false significa que os dados de orientação são fornecidos pelo próprio sistema de coordenadas do dispositivo this.alpha = doe.alpha //em torno do eixo Z 0-360 ao entrar A direção horizontal do telefone celular é 0 ou 360 this.beta = doe.beta // Em torno do eixo X -180~180 descreve a rotação da frente para trás this.gamma = doe.gamma // Descrição da rotação da esquerda para a direita em torno do eixo Y -90~90}, true) // chrome v65 suporta apenas aceleraçãoIncludingGravity e intervalo (não deve ser encontrado devido a algumas restrições), e as versões mais recentes de outros navegadores basicamente suportam window. addEventListener('devicemotion', (dme) => { this.acceleration = dme.acceleration this.accelerationIncludingGravity = dme.accelerationIncludingGravity this.rotationRate = dme.rotationRate this.interval = dme.interval }, falso)

Endereço de referência

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

 // Exemplo simples, bloqueie o mouse dentro do elemento pointer-lock-element let = document.getElementById(pointer-lock-element); document.addEventListener(mousemove, function(e) { var MovementX = e.movementX MovementY = e. motionY //Imprime o valor incremental do movimento do mouse console.log(X= +movimentoX, Y= +movimentoY }, false function lockPointer() {); elem = document.getElementById(ponteiro-lock-element);elem.requestPointerLock = elem.requestPointerLock();

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.