这是他们在浏览器选项卡之间切换时要寻找的第一件事。 我们只是给出了所谓的图标图标的可能描述之一。 网页的选项卡所占的屏幕空间比许多人认为的资源宝贵得多。 如果您能很好地使用标签，则除了继续发挥页面标识符的作用外，它还可以像“留言板”一样，告诉您页面上到底发生了什么。
网站图标实际上，当涉及到非活动的浏览器选项卡时，收藏夹图标特别有用。 考虑一个例子。
假设您使用其网页将最近暑假拍摄的照片上传到云服务。 上传照片时，您将打开一个新的浏览器选项卡，以查找有关您所居住的地方的详细信息并将其用于照片说明中。 在寻找所有这些的同时，一个紧紧抓住另一个，现在您正在浏览器第七个选项卡上观看Casey Neistat。 但是您不能安全地继续进行YouTube马拉松比赛。 您会定期查看云服务页面，以了解您的照片是否已经上传。
这就是您可以发挥创造力的情况！ 如果我们可以动态地更改构成收藏夹图标的像素并在页面快捷方式上显示有关文件上传过程的信息怎么办？ 事实上，这就是我们在这里要做的。
在支持此功能的浏览器中，您可以使用JavaScript，HTML
<canvas>和古代几何规则将某些动画显示为图标。
这是加载动画在浏览器选项卡中的外观。
立即开始做生意，从最简单的开始。 即，将
<link>和
<canvas>元素添加到页面的HTML代码中：
<head> <link rel="icon" type="image/png" href="" width=32px> </head> <body> <canvas width=32 height=32></canvas> </body>
在实践中使用此技术时，您可能希望隐藏
<canvas> 。 一种方法是使用
hidden HTML属性：
<canvas hidden width=32 height=32></canvas>
我将使
<canvas>可见状态，以便我们可以观看动画同时显示在收藏夹图标和
<canvas> 。 两者都具有标准图标图标的大小-32x32像素。
出于演示目的，我们将在页面上添加一个按钮，然后单击以启动动画。 将以下内容添加到页面的HTML代码中：
<button>Load</button>
现在让我们进入JavaScript代码。 让我们先检查一下
canvas支持：
onload = ()=> { canvas = document.querySelector('canvas'), context = canvas.getContext('2d'); if (!!context) { } };
下一步-连接按钮单击事件处理程序，该事件处理程序将用于在
<canvas>启动动画：
button = document.querySelector('button'); button.addEventListener('click', function() { n = 0, loadingInterval = setInterval(drawLoader, 60); });
我们传递给
setInterval的
drawLoader实体是一个函数，它将以60毫秒的间隔调用，并将某些内容输出到
<canvas> 。 在编写此函数的代码之前，让我们描述将用于逐渐绘制正方形的线条样式，这是一个加载指示器。
let gradient = context.createLinearGradient(0, 0, 32, 32); gradient.addColorStop(0, '#c7f0fe'); gradient.addColorStop(1, '#56d3c9'); context.strokeStyle = gradient; context.lineWidth = 8;
在
drawLoader函数中
drawLoader我们将基于已经完成的动画步骤的百分比来绘制线条。 在我们的情况下，1个动画步骤对应1％。 即，在步骤的前25％期间，将逐渐显示代表正方形上侧的线。 接下来的25％步骤将显示正方形的右侧，依此类推-每侧25％的动画时间。
通过擦除
<canvas>并输出与上一步相比稍长的线条，可以实现动画效果。 在动画的每个步骤中，图像到
<canvas>的输出结束后，图像将快速转换为PNG格式并设置为页面图标。
function drawLoader() { with(context) { clearRect(0, 0, 32, 32); beginPath(); if (n<=25){
现在让我们进行计算，以帮助我们画出必要的线。
这是在动画的前25个步骤中用于逐渐输出正方形上侧的数据：
- 起点是图像的左上角（0,0）。
- n是当前动画步骤的编号。
- x是当前动画步骤中直线终点的
x坐标。 - y是终点的
y坐标，为0。
我们需要在完成所有25个动画步骤之后，
x的值为32（即favicon和
<canvas> ）。 因此，我们将根据以下公式在当前动画步骤
n搜索
x的值：
x = (32/25) * n
实现此推理的线条图代码如下所示：
moveTo(0, 0); lineTo((32/25)*n, 0);
以下25个动画步骤（绘制正方形的右侧）以类似的方式执行：
moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, (32/25)*(n-25));
这是
drawLoader函数的完整代码：
function drawLoader() { with(context) { clearRect(0, 0, 32, 32); beginPath(); if (n<=25){ moveTo(0, 0); lineTo((32/25)*n, 0); } else if(n>25 && n<=50){ moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, (32/25)*(n-25)); } else if(n>50 && n<= 75){ moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, 32); moveTo(32, 32); lineTo(-((32/25)*(n-75)), 32); } else if(n>75 && n<=100){ moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, 32); moveTo(32, 32); lineTo(0, 32); moveTo(0, 32); lineTo(0, -((32/25)*(n-100))); } stroke(); }
总结
仅此而已！ 在
此存储库中可以找到我们在此处开发的用于创建矩形加载指示器的代码。
这是带有下载循环指示器代码的存储库。 实际上，作为类似的指标，您可以使用任何形状。 而且，如果您使用
<canvas>的
fill属性，这将使您获得有趣的效果。
亲爱的读者们！ 您所在地区是否有任何项目可以从动画图标中受益？
