在 HTML5 Canvas Javascript 中隐藏鼠标光标答案

【问题标题】：Hide Mouse Cursor when it's within HTML5 Canvas Javascript在 HTML5 Canvas Javascript 中隐藏鼠标光标
【发布时间】：2011-07-31 21:41:34
【问题描述】：

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

【问题讨论】：

相关（可耻的插件）：stackoverflow.com/questions/1071363/…
@Lucas Jones 我正要发布相同的链接，显然你可以更快地找到它。
@qw3n：只是因为我刚刚回复了关于我的答案的评论，所以'它在我的 StackExchange™ SuperCollider MultiDropdown™ 的收件箱中。
@Lucas Jones 我以前从未见过它这么叫，很有创意。

标签： javascript css html

【解决方案1】：

我认为您不需要 Javascript，您可以使用 CSS。为你的画布分配一个 div id/class，然后在你的 CSS 模板中使用它：

* {cursor: none;}

【讨论】：

啊！非常感谢！我会试试看！
这是CSS3 的一部分，但不是CSS2 的一部分。
这不适用于 Linux 上最新的 Firefox。光标在页面的其余部分被隐藏，但仍显示在画布上。
更改所有元素的光标 (*) 不是一个好方法。

【解决方案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>

【讨论】：

我试过这个，但它似乎只适用于 Firefox。另外，由于某种原因，我无法让 CSS 工作，我相信它也只能在 Firefox 中工作。有人知道是否有跨浏览器解决方案吗？感谢您的所有帮助。
@Chris：我测试过它可以在 IE9 和 Firefox 4.0 中运行。 Opera 11 和 Google Chrome 不隐藏光标。（也许某些安全设置会限制这一点）。
@Chris Google chrome 在使用 jQuery 时为我隐藏光标 `$('#canvas_div_no_cursor').css('cursor', 'none')

【解决方案3】：

最简单的方法（在现代浏览器上）是将光标设置为画布上的none。

如果您的画布是用 HTML 创建的，请执行以下操作：

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

与样式表相比，我更喜欢它，因为您要保证光标值不会被覆盖。

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

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

【讨论】：

【解决方案4】：

选择画布元素：

 canvas = document.getElementById("canvas");

获取上下文：

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

不设置：

context.strokeStyle = none;

【讨论】：

none 必须是字符串（“none”）。无论如何，它对我不起作用。