Question

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

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

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

Answer 1

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

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

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来实现它。

Answer 3

我可以为此考虑两种方法，其中一种方法可以达到你想要的效果：

使用一些JavaScript来改变游标，沿着与此jQuery片段相同的行：
```
$('canvas#draw').css('cursor', 'url(image/another-cursor.cur)');
```
如果您在按下鼠标按钮的情况下使用它，并在释放时恢复原始图像，我想这会产生您想要的确切效果。
在画布上绘制“光标”，并让它跟踪画布上的鼠标位置。这样，您可以绘制一个Photoshop样式的圆圈（等）来指示绘图将要发生的位置。我不确定这种方法的性能如何（我没试过），但我想它应该没问题。只需使用针对画布的鼠标移动触发的事件，这可能是您已经用于跟踪应该放置绘画的位置。

Answer 4

Answer 5

在拖动操作开启时向画布添加“拖动”类（并在mouseUp上将其删除）

然后添加此样式：

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