在 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
Hide Mouse Cursor when it's within HTML5 Canvas Javascript
提问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 none
on 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;