拖动鼠标时更改 HTML5 Canvas 上的光标

Question

我使用 Canvas Tag 制作了画笔类型的应用程序。我希望当鼠标位于画布上时光标发生变化，

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

我已经完成了这一点，但我不知道在拖动鼠标绘制图像时如何更改光标

Answer 1

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

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

工作示例：

Answer 2

对于任何仍在寻找此 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 才能实现。

Answer 3

我可以为此想到两种方法，其中一种可以实现您想要的：

1. 使用一些 JavaScript 来更改光标，与此 jQuery 片段相同：

   $('canvas#draw').css('cursor', 'url(image/another-cursor.cur)');
   

   如果您在按下鼠标按钮时使用它，并在释放鼠标按钮时恢复原始状态，我想这将达到您想要的效果。

2. 在画布本身上绘制“光标”，并让它跟踪鼠标在画布上的位置。这样，您可以绘制 Photoshop 风格的圆圈（等）来指示绘图的位置。我不确定这种方法的性能如何（我没有尝试过），但我想它应该没问题。只需使用在画布上移动鼠标时触发的事件，这可能是您已经用来跟踪油漆应该放置的位置的事件。

Answer 4

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

然后添加以下样式：

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

Answer 5

在这里工作正常：
http://jsfiddle.net/Mutant_Tractor/DMBWC/1/