javascript - 在自定义 JS 光标上设置光标原点

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';