javascript - 使用 CSS 为鼠标光标分配颜色

Question

如何为网页中的鼠标光标指定颜色？

任何人都可以建议我一种使用任何技术(例如， HTML、CSS、JavaScript？

Answer 1

只是为了添加动态添加光标的可能性，而不提供图像，而是使用 JavaScript 和 Canvas 在客户端上生成它。

演示包含一个用形状绘制的简单光标，但这也可以很容易地使用图像、视频等( Canvas 支持的一切)。

<强> Fiddle (针对 Firefox 于 2016 年 5 月更新 - 从文档移至元素)。

注意:当光标像本演示中那样频繁更改时，FireFox 会出现问题 - 更新为每秒仅更改一次。 FF 在设置新图像时会清除光标，但由于新图像需要解码，因此它同时显示默认值。 Chrome 会等到图像解码后再进行切换。

无论如何，这只是为了展示可以使用 Canvas 来完成 - 使用 Chrome 进行测试演示，并且不要经常更换鼠标:-)。

这里随机改变颜色的动画循环演示:

function loop() {

    var color = 'rgb(' + ((255 * Math.random())|0) + ','
                       + ((255 * Math.random())|0) + ','
                       + ((255 * Math.random())|0) + ')';
    makeCursor(color);

    setTimeout(loop, 1000);
}

光标制造商:

function makeCursor(color) {

    // create off-screen canvas
    var cursor = document.createElement('canvas'),
        ctx = cursor.getContext('2d');

    cursor.width = 16;
    cursor.height = 16;

    // draw some shape for sake of demo
    ctx.strokeStyle = color;

    ctx.lineWidth = 2;
    ctx.moveTo(2, 10);
    ctx.lineTo(2, 2);
    ctx.lineTo(10, 2);
    ctx.moveTo(2, 2);
    ctx.lineTo(30, 30)    
    ctx.stroke();

    // set image as cursor (modern browsers can take PNGs as cursor).
    element.style.cursor = 'url(' + cursor.toDataURL() + '), auto';
}