Ocultar el cursor del ratón cuando está dentro de HTML5 Canvas Javascript

estoy en el proceso de hacer un juego usando Javascript y el elemento canvas de HTML5 como una alternativa a Flash. Mi pregunta es: ¿hay algún código que pueda usar para ocultar el cursor/puntero del mouse mientras pasa dentro del lienzo? ¡La ayuda es muy apreciada!Ocultar el cursor del ratón cuando está dentro de HTML5 Canvas Javascript

Fuente

2011-07-31 Chris

Relacionados (enchufe vergüenza): http://stackoverflow.com/questions/1071363/is-it-possible-to-hide-the- cursor-in-a-webpage-using-css-or-javascript –

@Lucas Jones Estaba a punto de publicar el mismo enlace, obviamente podrías encontrarlo un poco más rápido. – qw3n

@ qw3n: Solamente acabo había respondido a un comentario en mi respuesta allí, por lo que 'TWAS en la bandeja de entrada de mi StackExchange ™ SuperCollider MultiDropdown ™. –

No creo que necesita Javascript para esto, sólo puede utilizar CSS. Asignar el lienzo un div id/clase, y luego utilizar esto en su plantilla CSS:

* {cursor: none;}

Fuente

2011-07-31 21:44:29

¡Ah! ¡Muchas gracias! ¡Lo intentaré! – Chris

Esto es parte de [CSS3] (http://dev.w3.org/csswg/css3-ui/#cursor) pero no parte de [CSS2] (http://www.w3.org/TR/CSS21/ ui.html # propdef-cursor). – Shi

Esto no funciona en el último Firefox en Linux. El cursor se oculta para el resto de la página, pero aún aparece en el lienzo. –

Puede usar javascript para manipular estilo del cursor. Código:

<div id="canvas_div_no_cursor"> 
    <!-- canvas here --> 
</div> 
<script type="text/javascript"> 
    document.getElementById('canvas_div_no_cursor').style.cursor = "none"; 
</script>

Fuente

2011-07-31 21:49:35 VIK

Intenté esto, pero parece funcionar en Firefox. Además, no pude hacer funcionar el CSS por alguna razón, creo que también solo funciona en Firefox. ¿Alguien sabe si hay una solución de navegador cruzado? Aprecio toda tu ayuda. – Chris

@Chris: Funciona en IE9 y Firefox 4.0 como probé. Opera 11 y Google Chrome no ocultan el cursor. (Tal vez algunas configuraciones de seguridad restrinjan esto). – VIK

@Chris Google Chrome me está ocultando el cursor cuando se usa jQuery '$ ('# canvas_div_no_cursor'). Css ('cursor', 'none') –

La manera más simple (en los navegadores modernos) es establecer el cursor a none en el lienzo.

Si se crea el lienzo en HTML, hacer:

<canvas id="canvas" style="cursor: none;"></canvas>

yo estaría a favor de este sobre una hoja de estilo porque quiere garantizar el valor cursor no está sobre-montado.

Si se crea el lienzo en JavaScript, hacer:

const canvas = document.createElement('canvas'); 
canvas.style.cursor = 'none'; 
document.body.appendChild(canvas);

Fuente

2017-07-04 08:03:07 sdgfsdh

Ocultar el cursor del ratón cuando está dentro de HTML5 Canvas Javascript

Respuesta

Cuestiones relacionadas