拖动鼠标时将光标更改为HTML5 Canvas

Question

我使用Canvas标签制作了一个画笔类型的应用程序.我希望当鼠标在画布上时Cursor Changes,

<canvas id="draw" style="cursor: url(image/pencil.cur)">

我已经完成了这个,但我无法弄清楚当我拖动鼠标绘制图像时如何更改光标

Answer 1

:active当鼠标按钮在元素上方向下时,使用CSS伪类更改光标:

#draw:active { 
    cursor: url(image/pencil.cur);
}

**评论[hydrarulz](http://stackoverflow.com/users/151244)(拒绝编辑):**您还需要为Chrome添加`:focus`.在某些只有`:active`的情况下它不起作用.将`#draw:active {`替换为`#draw:active,#draw:focus {`. (7认同)
在mouseDown中使用preventDefault()代替CSS,至少在Chrome中使用:http://stackoverflow.com/questions/11805318/when-i-click-on-a-canvas-and-drag-my-mouse-the -cursor-变化到一个文本,selecti (7认同)
从未想过使用:在非可点击元素上激活...很酷:) (3认同)
当画布位于包含文本的div内时,它不起作用:http://jsfiddle.net/DMBWC/202/ (2认同)
@FernandoEscher:似乎是WebKit中的一个bug,Firefox很好.提交的错误:https://bugs.webkit.org/show_bug.cgi？id = 105355. (2认同)

Answer 2

对于仍在寻找这个webkit bug的解决方案的任何人:https://bugs.webkit.org/show_bug.cgi？id = 105355 ,这就是我所做的.

我将此属性添加到body元素,以使我的页面中的所有文本都无法选择,就是这样.

body {
    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -moz-user-select: none;

    user-select: none;
}

问题是,如果你真的需要一个可选择的元素,你将不得不改变它的CSS来实现它.