简体繁体 English

始终将鼠标悬停在画布上

[英]Always Show Mouse Over Canvas

原文 2015-08-09 02:33:03 9 1 javascript/ html/ css/ canvas/ mouse

I'm working on a javascript/canvas game, and using mouse position to determine what blocks to dig. 我正在开发一个javascript / canvas游戏，并使用鼠标位置来确定要挖掘的块。 Whenever I use the movement controls the mouse disappears though, which is annoying because then I have stop moving and move the mouse to see its position again. 每当我使用移动控件时，鼠标都会消失，这很烦人，因为那时我已经停止移动并再次移动鼠标以查看其位置。

So I'm looking for a way to make the mouse always visible on the canvas, opposite to using CSS cursor: none to make it invisible. 因此，我正在寻找一种使鼠标始终在画布上可见的方法，与使用CSS cursor: none相反cursor: none一种方法使鼠标不可见。

Full project here: https://gist.github.com/TuckerFlynn/0a52278878a888b0f695 完整的项目在这里： https : //gist.github.com/TuckerFlynn/0a52278878a888b0f695

1 个解决方案

The mouse can certainly navigate off-canvas, so... 鼠标当然可以在画布外导航，因此...

Hide the mouse when it's over the canvas. 将鼠标悬停在画布上时将其隐藏。
Draw your own "fake cursor" following the current mouse position reported by canvas's mousemove . 根据canvas的mousemove报告的当前鼠标位置绘制自己的“假光标”。
If the mouse leaves the canvas, just leave the fake cursor visible as a reminder of the mouse's last canvas position. 如果鼠标离开画布，则只需使假光标可见即可提醒鼠标最后的画布位置。

Your "fake" canvas cursor doesn't have to look like a mouse. 您的“伪”画布光标不必看起来像鼠标。 It could even be a simple cross. 它甚至可以是一个简单的十字架。 Or if you really want it to look like a mouse, then move an image of a mouse around the canvas. 或者，如果您真的希望它看起来像鼠标，则在画布上移动鼠标的图像。