在自定义 JS 光标上设置光标原点答案

【问题标题】：Set cursor origin on custom JS-cursor在自定义 JS 光标上设置光标原点
【发布时间】：2016-04-26 12:15:16
【问题描述】：

我有一个 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 区域之外。如何移动自定义光标的实际区域，使十字的中心位于光标的位置？

【问题讨论】：

标签： javascript canvas cursor

【解决方案1】：

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

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

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

【讨论】：