拖动鼠标时将光标移到HTML5画布上

我使用画布标记制作了一个画笔类型的应用程序。我想，当鼠标在画布光标变为上，拖动鼠标时将光标移到HTML5画布上

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

我已经做到了这一点，但我无法弄清楚如何将我改变光标，而我拖动鼠标绘制图像

来源

2011-02-09 Yahoo

请注意，您应该[避免将您的CSS放入HTML中]（http://phrogz.net/CSS/HowToDevelopWithCSS.html#separatestyle）。 – Phrogz 2011-02-09 15:04:01

http://jsfiddle.net/Mutant_Tractor/DMBWC/1/这个例子表明，如果你在页面上有可选的文本，它将不起作用。当我在上面的示例中拖过画布时，它仍然变成文本选择游标。 – 2011-12-12 19:08:32

使用:active CSS伪类改变光标当鼠标按键时在元素：

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

工作示例：http://jsfiddle.net/nXv63/

来源

2011-02-09 14:16:41

从未想过使用：在非可点击的元素上活跃......酷:) – Omiod 2011-02-09 14:18:56

**评论来自[hydrarulz]（http://stackoverflow.com/users/151244）（拒绝编辑）：**您还需要为Chrome添加`：focus`。在某些情况下，只有`：active`才有效。将`#draw：active {`替换为`#draw：active，#draw：focus {`。 – Anne 2011-12-12 17:13:28

两个办法我能想到这一点，其中一个可能完成你想要的：

使用JavaScript来改变光标，沿着相同的路线，因为这jQuery的片段：
```
$('canvas#draw').css('cursor', 'url(image/another-cursor.cur)'); 
```
如果您要在事件中使用鼠标按钮时按下鼠标按钮，并在释放时恢复原始图案，我想这样会达到您想要的效果。
在画布本身上绘制“光标”，并让它跟踪画布上的鼠标位置。通过这种方式，您可以绘制一个Photoshop风格的圆圈（等）来指示绘图将在何处发生。我不确定这种方法的性能如何（我没有尝试过），但我想它应该没问题。只需使用鼠标移动时为画布触发的事件，这大概就是你已经用来追踪涂料应该放在哪里的东西。

来源

2011-02-09 14:11:23

这里工作的罚款： http://jsfiddle.net/Mutant_Tractor/DMBWC/1/

来源

2011-02-09 14:12:50

看不到东西... – 2014-10-30 16:31:33

将“拖动”类添加到画布上，而拖动动作是在（移除它mouseUp事件）

然后加入这种风格：

canvas {cursor: default;} 
canvas.dragging {cursor: crosshair;}

来源

2011-02-09 14:17:34 Omiod

对于任何一个还在寻找一个解决这个WebKit的错误：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来做到这一点。

来源

2013-04-23 14:30:30 Callistino

拖动鼠标时将光标移到HTML5画布上

回答

相关问题