在HTML5 Canvas Javascript中隐藏鼠标光标

Question

I'm in the process of making a game using Javascript and the html5 canvas element as an alternative to Flash. My question is: is there any bit of code I can use to hide the mouse cursor/pointer as it passes within the canvas? Help is much appreciated!

Answer 1

I don't think you need Javascript for this, you can just use CSS. Assign your canvas a div id/class, and then use this in your CSS template:

* {cursor: none;}

Answer 2

You can use javascript to manipulate cursor style. Code:

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

Answer 3

The simplest way (on modern browsers) is to set the cursor to none on the canvas.

If your canvas is created in HTML, do:

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

I would favour this over a style-sheet because you want to guarantee the cursor value is not over-ridden.

If your canvas is created in JavaScript, do:

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

Answer 4

Select the canvas element:

 canvas = document.getElementById("canvas");

Get context :

context = canvas.getContext("2d");

Set none :

context.strokeStyle = none;