自定义光标在Chrome中无法正常工作 [英] Custom cursor not working correctly in Chrome

问题描述

我无法获取chrome来正确显示我的自定义光标，但它似乎在FireFox中正常工作。

为了给一个小的上下文，作为我尝试加快HMLT5 / Javascript速度的一部分，我使用新的canvas元素组合一个迷你射击游戏，我使用Axialis Cursor Workshop创建的自定义范围类型的游标，这里是画布的html和css：

  < canvas id =canvasclass =blockwidth =800height =700
 onSelectStart =this.style.cursor ='url（cursors / scope.cur），crosshair'; return false;/> 
 
 #canvas 
 {
 cursor：url（../ cursors / scope.cur），crosshair; 
 background：url（../图像/ canvas_background.jpg）; 
} 
  

在Chrome中，我看到一则警告，说明但是与 scope.cur 文件相关的MIME类型应用程序/八位字节流。当我将鼠标移动到画布区域的左上角时，我可以看到光标被绘制，但光标的热点不在光标的中心。

在firefox中，这个工作没有问题，我仍然可以看到相同的光标，并且光标的热点在我的意图的中心。

任何想法，我在这里做错了，我怎么可以解决它的铬？标准的 crosshair 光标在Chrome中正常工作（因为它的热点位置正确），但这不适合我的目的。

您可以自己查看这里，只是

解决方案

对于任何感兴趣的人，我解决了这个问题

我第一次尝试使用一个空白光标，然后Chrome将其渲染为一个黑色方块..所以我决定绘制目标作为画布的一部分，并使用在0,0处具有热点的光标，并且是空白的，除了与目标颜色相同的0,0瓦之外。

您可以在开始游戏后看到这里的结果，这不是一个漂亮的解决方案，但仍然有效。

I'm having trouble getting chrome to display my custom cursor correctly but it seems to work as intended in FireFox.

To give a little context, as part of my attempt to get up to speed with HMLT5/Javascript I'm putting together a mini shooting game using the new canvas element and I'm using a custom scope-like cursor I created with Axialis Cursor Workshop and here's the html and css for the canvas:

<canvas id="canvas" class="block" width="800" height="700"
        onSelectStart="this.style.cursor='url(cursors/scope.cur), crosshair'; return false;"/>

#canvas
{
    cursor: url(../cursors/scope.cur), crosshair;
    background: url(../images/canvas_background.jpg);
}

In chrome, I see a warning saying "Resource interpreted as image but transferred with MIME type application/octet-stream." in relation to the scope.cur file. When I move my mouse to the top left corner of the canvas area I can see the cursor is drawn but the 'hot spot' of cursor is not at the center of the cursor.

In firefox, this works with no problem, I can still see the same cursor and the 'hot spot' of the cursor is at its center as I intended.

Any idea what I'm doing wrong here and how can I fix it for chrome? The standard crosshair cursor works fine in chrome (in that its 'hot spot' is positioned correctly) but it doesn't quite fit my purpose here.

You can see for yourself here, just move the cursor to the top left corner in chrome and firefox to see the difference.

解决方案

For anyone interested, I solved this problem in the end though it's a bit of a hack.

I first tried using a blank cursor but then Chrome renders that as a black square.. so I decided to draw the target as part of the canvas and use a cursor which has hotspot at 0, 0 and is blank EXCEPT the 0, 0 tile which has the same colour as the target.

You can see the result here once you start the game, it's not a pretty solution, but works nonetheless.

这篇关于自定义光标在Chrome中无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！