4

我正在使用 Canvas 对象在 javasript 中开发画笔应用程序。当鼠标指针进入 Canvas 对象时，我想更改自己的鼠标光标。如何加载我自己的图标？

4

4 回答 4

6

这可以在 CSS 中完成。

canvas {
    cursor: url(cursor.cur), url(cursor.gif), auto;
}

IE、Firefox、Safari 和 Chrome 将使用 .cur 文件。GIF（或使用 PNG）适用于不支持 .cur 文件的浏览器（不确定是否有这样的文件）。Opera 不支持自定义光标。

图片的大小必须为 32x32 像素或更低。这是（Windows）操作系统限制；不是浏览器限制。

参考 - Quirksmode CSS 兼容性表http://www.quirksmode.org/css/cursor.html

于 2010-02-14T15:08:05.833 回答
3

您有.cur自己的自定义光标的文件吗？

您可以在 Canvas 对象中包含一个style属性，该属性告诉光标应如何显示。这可以通过自定义 css 光标来完成 

style="cursor: url(mycursor.cur);"
  1. IE 需要一个 .cur 文件。
  2. Firefox 需要第二个非 URL 值；像光标：url（pix/cursor_ppk.gif），自动。
  3. 图片的大小必须为 32x32 像素或更低。这是（Windows）操作系统限制；不是浏览器限制。

取自CSS2 - 光标样式，兼容 IE5.5+、FF、Safari 和 Chrome。Opera 和 Konqueror 3.5.7 不兼容。

于 2010-02-14T15:01:28.160 回答
1

有一种方法：http : //beradrian.wordpress.com/2008/01/08/cross-browser-custom-css-cursors/ 不适用于 Opera，但适用于 IE、FF、Safari、Chrome。

于 2010-02-14T15:03:19.383 回答
0

我在这里使用 js 发布了 Opera 的解决方法： Opera and Custom cursor in CSS

于 2011-05-05T09:53:49.773 回答