Javascript HTML5画布绘制自定义光标

我有一个你可以画的地方，我想让用户看到他正在画的点的大小。所以我需要在画布上画一个10x10像素的自定义光标。 当然，我不想在用户移动鼠标时在图像上画画

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

我可以用某种方式备份原始图像，每次都把它涂满

我可以用光标移动a。但如果光标离开画布，我需要转发每次单击并使其不可见

我可以在我的上面创建一个第二个画布，只用于绘制光标

这样做最好的方法是什么

更新

对不起，我没有解释清楚。光标需要改变颜色并捕捉到网格，所以我真的需要自己绘制它。我知道css

cursor:url（…）

对我不起作用。

CSS3:

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

---

对PitaJ和David Starkey选中+1，它们是正确的

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

但是，如果您绝对需要捕捉到网格，那么您必须使用分层光标画布之类的东西。无法强制用户的光标对齐网格。（想想结果会是什么恶作剧！）

---

1号和3号都可以。我会自己选3号。“最佳”取决于您。

检查：为什么不使用CSS3光标样式@戴维斯达克谢谢你，但对我不起作用。我需要一个定制颜色的黑色正方形。此外，正方形不能自由移动，但需要在给定的网格中跳跃。你可以使用一个图像作为光标，因此你真的可以随心所欲：我完全同意，我将使用3。考虑到您有一个绘图应用程序，您应该使用渲染引擎来构建它，而不是基于事件（如典型的webapps），即您应该有一个以特定间隔运行的程序循环。这个程序循环应该告诉画布的上下文要绘制什么以及在哪里绘制。程序循环将允许您处理动画；从技术上讲，这就是鼠标光标捕捉的方式。因为您需要以特定的间隔（通常为1000/fps）进行检查，以更新鼠标的当前坐标。你会在模块上使用x和y你救了我的命