Скрыть курсор мыши, когда он находится в HTML5 Canvas Javascript

Question

Я нахожусь в процессе создания игры с использованием Javascript и элемента canvas html5 в качестве альтернативы Flash. Мой вопрос: есть ли какой-нибудь фрагмент кода, который я могу использовать, чтобы скрыть курсор / указатель мыши, когда он проходит внутри холста? Помощь очень ценится!

Answer 1

Я не думаю, что вам нужен Javascript для этого, вы можете просто использовать CSS.Назначьте свой холст div id / class, а затем используйте это в своем шаблоне CSS:

* {cursor: none;}

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>

Answer 3

Самый простой способ (в современных браузерах) - установить курсор на none на холсте.

Если ваш холст создан в HTML, выполните:

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

Я бы предпочел это над таблицей стилей, потому что вы хотите гарантировать, что значение курсора не будет переопределено.

Если ваш холст создан на JavaScript, выполните:

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

Answer 4

Выберите элемент холста:

 canvas = document.getElementById("canvas");

Получить контекст:

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

Не задавать:

context.strokeStyle = none;