Question

我有一个js函数，当我将鼠标悬停在图像上时会创建一个十字/ X形状的自定义光标。看起来像这样：

function makeCursor() {

    var cursor = document.createElement('canvas'),
        ctx = cursor.getContext('2d');

    cursor.width = 20;
    cursor.height = 20;

    ctx.strokeStyle = '#b89552';

    ctx.lineWidth = 3;
    ctx.lineCap = 'round';

    ctx.moveTo(0, 20);
    ctx.lineTo(20, 0);
    ctx.moveTo(0, 0);
    ctx.lineTo(20, 20)    
    ctx.stroke();

    var aboveimage = document.getElementsByClassName("aboveimage");
    for(i=0;i<aboveimage.length;i++){
        aboveimage[i].style.cursor = 'url(' + cursor.toDataURL() + '), auto';
    }

}

问题是十字的中心没有位于光标的位置。我尝试将“moveTo”和“lineTo”更改为-10而不是0和10而不是20.但是只是将十字移动到可查看的20x20px区域之外。如何移动自定义光标的实际区域，使十字中心位于光标的位置？

Answer 1

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

将x和y位置设置为您需要的值。

...cursor =  'url(...) x y, auto';

在自定义JS游标上设置游标原点

1 个答案: