Как сделать холст невидимым для глаз, но не для перемещения мыши?

Question

Как сделать холст невидимым для глаз, но не для перемещения мыши?

1

У меня есть несколько цветных строк на холсте, которые я просматриваю, используя событие mousemove, которое возвращает код шестнадцатеричного цвета строки. Так или иначе, я мог бы сделать это холст невидимым для глаз, но когда указатель перейдет через холст, он все еще возвращает правильный цветовой код?

Я попытался настроить контекст globalAlpha на прозрачный или почти прозрачный (0, 0,1...) со смешанными результатами в следующем скрипте:

В Firefox собранный hex возвращает измененный цвет из-за прозрачности,
В Chrome он возвращает правильный цвет независимо от прозрачности (на самом деле это поведение, которое я хочу).

И как ни странно, в моем исходном коде, даже в Chrome, линии холста с globalAlpha=0 больше не возвращают свой первоначальный цвет.

Может ли кто-нибудь объяснить, что ожидаемое поведение для globalAlpha? Что еще более важно, есть ли другой способ сделать холст невидимым для глаз, но который все еще позволяет собирать цвета с помощью мыши? Любая помощь ценится!

sc28 23 окт. 2017, в 23:36

Источник

Теги:

javascript

html5

canvas

mouseevent

1 ответ

Ещё вопросы

Ante Jablan Adamović · Accepted Answer · 2017-10-23T19-13-00.000Z

Установите opacity свойства CSS в 0.

Когда вы применяете свойство к вашему холсту, как

#examplecanvas {
  opacity: 0;
}

Он будет исчезать с экрана, но все же обнаруживает цвет, когда вы наводите на него курсор (или щелкните его).

это именно то, что мне нужно, большое спасибо! Я столкнулся с некоторыми конфликтами при установке непрозрачности CSS для класса canvas в моем коде (может быть переопределен родителем или чем-то еще?), Но использование идентификатора, как вы предлагаете, работало нормально. еще раз спасибо :)