javascript - 使用很棒的字体作为光标

Question

这个问题已经有答案了:

Animated cursor support in web applications? (9 个回答)

已关闭 6 年前。

我想在等待时使用我在这里找到的以下代码更改光标图标:

var canvas = document.createElement("canvas");
canvas.width = 100;
canvas.height = 110;
document.body.appendChild(canvas);

var ctx = canvas.getContext("2d");
ctx.fillStyle = "#000000";
ctx.font = "20px FontAwesome";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("\uf245", 35, 25);
ctx.font = "35px FontAwesome";
ctx.fillText("\uf013", 55, 15);

var dataURL = canvas.toDataURL('image/png')
$('body').css('cursor', 'url(' + dataURL + '), auto');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

有人知道我能否让齿轮旋转吗？

Answer 1

只需使用 CSS cursor:wait。这使用用户自己的光标设置，这是您应该使用的，因为这可以帮助用户更轻松地了解进程正在运行。一致性非常重要。

html,body {height:100%}
body {cursor:wait}

我觉得不错。