当鼠标在HTML5 Canvas JavaScript中时隐藏鼠标指针

Question

我正在使用Javascript和html5画布元素来制作游戏，作为Flash的替代品。我的问题是：是否有任何可以隐藏鼠标指针的代码，当它经过画布时？ 非常感谢您的帮助！

可以使用以下代码来隐藏鼠标指针：

```CSS canvas { cursor: none; } ```

将此代码添加到CSS文件中或在`

- Chris

---

相关（有点不好意思的广告）：http://stackoverflow.com/questions/1071363/is-it-possible-to-hide-the-cursor-in-a-webpage-using-css-or-javascript - Lucas Jones

Answer 1

我认为你不需要使用 JavaScript，可以直接使用 CSS。 将你的画布分配一个 div id/class，并在你的 CSS 模板中使用它:

* {cursor: none;}

- Ankit Soni

---

这是 CSS3 的一部分，但不是 CSS2 的一部分。 - Shi

这在最新的Linux Firefox上无法使用。光标在页面的其余部分被隐藏了，但仍然会显示在画布上。 - Milan Babuškov

将所有元素(*)的光标更改并不是一个好的方法。 - sdgfsdh

Answer 2

你可以使用JavaScript来操作光标样式。代码：

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

- VIK

---

我尝试过这个，但它似乎只在Firefox中有效。此外，由于某些原因，我无法让CSS起作用，我认为它也只在Firefox中有效。有人知道是否有跨浏览器的解决方案吗？感谢大家的帮助。 - Chris

@Chris：我测试过，它可以在IE9和Firefox 4.0上运行。Opera 11和Google Chrome不会隐藏光标。（可能是某些安全设置限制了此功能）。 - VIK

@Chris 当使用jQuery时，Google Chrome会隐藏我的光标 $('#canvas_div_no_cursor').css('cursor', 'none')。 - Lea Hayes

Answer 3

在现代浏览器上最简单的方法是将光标设置为none。如果你的canvas是在HTML中创建的，请执行以下操作：

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

我认为这比使用样式表更好，因为您想要确保光标值不被覆盖。

如果您的画布是在JavaScript中创建的，请执行以下操作：

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

- sdgfsdh

Answer 4

请选择画布元素：

 canvas = document.getElementById("canvas");

获取上下文：

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

设置为无：

context.strokeStyle = none; 

- Amine Belkhiria

---

无论如何，它对我没有起作用。 - Wit