javascript - HTML5画布绘制自定义光标

Question

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

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

1. 我可以以某种方式备份原始图像并每次都将其全部绘制
2. 我可以用光标移动 a 。但是如果光标离开画布，我需要转发每次点击并使其不可见。
3. 我可以在我的顶部创建一个带有第二个画布的分层画布，仅用于绘制光标。

最好的方法是什么？

更新

对不起，我没有很好地解释自己。光标需要改变颜色并对齐网格，所以我真的需要自己画。我知道对cursor:url(...)我不起作用的 CSS。

Answer 1

CSS3：

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

Answer 2

PitaJ 和 David Starkey 的复选标记+1——他们是正确的。

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

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

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