我使用 Canvas Tag 制作了一个画笔类型的应用程序。我希望当鼠标在画布上时光标会发生变化，
<canvas id="draw" style="cursor: url(image/pencil.cur)">
我已经完成了，但我不知道如何在拖动鼠标绘制图像时更改光标
【问题讨论】：
使用:active CSS 伪类在鼠标按钮在元素上时更改光标：
#draw:active {
cursor: url(image/pencil.cur);
}
【讨论】：
:focus。在某些情况下，只有:active 不起作用。将#draw:active { 替换为#draw:active, #draw:focus {。
对于仍在寻找解决此 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 来做到这一点。
【讨论】：
为此我可以想到两种方法，其中一种可能会实现您想要的：
使用一些 JavaScript 来改变光标，和这个 jQuery 片段一样：
$('canvas#draw').css('cursor', 'url(image/another-cursor.cur)');
如果您要在按下鼠标按钮时使用它，并在释放鼠标按钮时恢复原始状态，我想这会产生您想要的确切效果。
在画布本身上绘制“光标”，并让它跟踪鼠标在画布上的位置。这样，您可以绘制一个 Photoshop 样式的圆圈（等）来指示绘图将发生的位置。我不确定这种方法的性能如何（我没有尝试过），但我想应该没问题。只需将鼠标移动时触发的事件用于画布，这可能是您已经用来跟踪应该放置油漆的位置的事件。
【讨论】：
在拖动动作开启时向画布添加“拖动”类（并在 mouseUp 上将其移除）
然后添加这个样式：
canvas {cursor: default;}
canvas.dragging {cursor: crosshair;}
【讨论】：
【讨论】：