HTML5画布绘制自定义光标

Question

我有一个canvas你可以在那里画画，我希望用户看到他正在画的点的大小。所以我需要在画布上绘制一个自定义光标作为10x10像素的正方形。 当然，当用户只是移动鼠标时，我不想在图像上绘画。

我的想法如何做到这一点：

1. 我可以以某种方式备份原始图像并且每次都画出来
2. 我可以用光标移动一个。但是如果光标离开画布，我需要转发每一次点击并使其不可见。
3. 我可以创建一个layered canvas，在我的上方有第二个画布，只是为了绘制光标。

最好的做法是什么？

更新

抱歉，我没有很好地解释自己。光标需要更改颜色并捕捉到网格，所以我真的需要自己绘制它。我知道css cursor:url(...)对我不起作用。

Answer 1

勾选+ 1到PitaJ和David Starkey - 他们是对的。

最简单/最有效的解决方案是修改游标本身。如上所述，您甚至可以为光标执行自定义图像以进行颜色更改。

但是如果你绝对需要对齐网格，那么你必须使用像分层光标画布这样的东西。没有办法强制用户的光标进入网格对齐。 （想想会导致的恶作剧！）

1号和3号都可以使用。我会自己去3号。然而，“最好的”取决于你。

Answer 2

CSS3：

#canvas1 {
    cursor: url(./myCursor.cur), none;
}