Как сделать масштабируемый пользовательский курсор для рисования на холсте HTML5

Question

У меня есть приложение для рисования на холсте html5, похожее на это http://jsfiddle.net/rnNFB/1/,, но используя курсоры по умолчанию, пользователь не может определить, насколько велик размер кисти (настройка lineWidth). Из курсоров по умолчанию курсор-перекрестие с кругом почти идеален, мне просто нужно иметь возможность масштабировать графическую или круговую часть вверх или вниз в зависимости от настройки размера кисти пользователя, чтобы отразить, насколько большой будет следующий мазок кисти. быть.

Спасибо.

Answer 1

#myCanvas { cursor:none; }

Затем нарисуйте курсор на свой вкус внутри холста:)

В качестве альтернативы вы можете создать .ico/.cur файлы и использовать их в своем CSS, а затем переключать классы:

#myCanvas.lineMode { cursor: url(../images/line.ico); }

Answer 2

Я не думаю, что какие-либо браузеры предоставляют API для изменения внешнего вида курсора - пока нет.

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

Существует возможность указать URL-адрес в качестве курсора в CSS, что может сработать, если вы используете URI данных с созданным изображением, но поддержка этого, похоже, не поддерживается.еще очень хорошо (см. QuirksMode )