在 HTML5 Canvas Javascript 中隐藏鼠标光标

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6892502/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 23:38:55  来源:igfitidea点击:

Hide Mouse Cursor when it's within HTML5 Canvas Javascript

javascriptcsshtml

提问by Chris

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!

我正在使用 Javascript 和 html5 canvas 元素作为 Flash 的替代品制作游戏。我的问题是:是否有任何代码可以用来隐藏鼠标光标/指针在画布内传递时?非常感谢帮助!

回答by Ankit Soni

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:

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

* {cursor: none;}

* {cursor: none;}

回答by VIK

You can use javascript to manipulate cursor style. Code:

您可以使用 javascript 来操作光标样式。代码:

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

回答by sdgfsdh

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

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

If your canvas is created in HTML, do:

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

<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:

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

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

回答by Amine Belkhiria

Select the canvas element:

选择画布元素:

 canvas = document.getElementById("canvas");

Get context :

获取上下文:

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

Set none :

设置无:

context.strokeStyle = none;