本文共 4698 字，大约阅读时间需要 15 分钟。
网站图标是在线品牌建设的关键部分，它们为用户提供视觉提示 ，并帮助他们将您的网站与其他网站区分开 。 尽管大多数网站图标都是静态的，但也可以创建动画网站图标 。
不断移动的网站图标无疑对大多数用户来说很烦人，而且还会 ，但是当它只是响应用户操作或背景事件 （例如页面加载）而在短时间内进行动画处理时，它可以提供额外的视觉信息，因此改善用户体验。
在本文中，我将向您展示如何在HTML canvas中创建动画的圆形加载器 ，以及如何将其用作收藏夹图标。 动画网站图标加载器是一种很好的工具，它可以可视化显示在页面上执行的所有操作的进度 ，例如文件上传或图像处理。 您也可以在上查看属于本教程的演示 。
1.创建
首先，我们需要创建一个画布动画 ，该动画 绘制一个完整的圆圈，总共100％ （这在我们需要增加圆弧时非常重要）。
我使用的是画布的标准图标大小，为16 * 16像素。 您可以根据需要使用比其大的尺寸，但是请注意，将画布图像用作网站图标时，图像将被缩小到16 2像素区域 。
2.检查是否支持
在事件处理程序内部，我们使用方法获取画布元素 [ cv ] 的引用 ，并在的帮助下引用其2D绘图上下文对象 [ ctx ]。
onload = function() { cv = document.querySelector('#cvl'), ctx = cv.getContext('2d'); if (!!ctx) { /* ... */ }}; 我们还需要通过确保绘图上下文对象[ ctx ] 存在并且未被定义，来检查UA是否支持画布 。 我们将所有属于load事件的代码放入此if条件。
3.创建初始变量
让我们再创建三个全局变量 ， s表示圆弧的起始角度 ， tc表示计时器的id ， pct 表示同一计时器的百分比值 。 代码tc = pct = 0将tc和pct变量的初始值分配为0。
onload = function() { cv = document.querySelector('#cvl'), ctx = cv.getContext('2d'); if (!!ctx) { s = 1.5 * Math.PI, tc = pct = 0; }}; 为了说明s的值是如何计算的，让我快速解释一下弧角是如何工作的。
圆弧角
圆的圆周的 （由定义弧的两条射线组成的角度） 为 2πrad ，其中rad为单位符号。 这使得四分之一弧的角度等于0.5π弧度 。
当可视化加载进度时 ，我们希望从顶部位置而不是默认的右侧绘制画布上的圆圈。
从正确的位置 顺时针旋转 （在画布上绘制了默认的方向弧） ，在 四分之三之后 （即以1.5πrad的角度） 到达最高点。 因此，我创建了变量s = 1.5 * Math.PI以稍后表示从画布上绘制圆弧的起始角度 。
4.设置圆圈的样式
对于绘图上下文对象，我们定义下一步要绘制的圆的和属性 。 strokeStyle属性代表其颜色。
onload = function() { cv = document.querySelector('#cvl'), ctx = cv.getContext('2d'); if (!!ctx) { s = 1.5 * Math.PI, tc = pct = 0; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; }}; 5.画圆
我们在“ 加载”按钮[ #lbtn ]中添加了一个点击事件处理程序 ，该事件 触发一个60毫秒的计时器 ，该计时器每60ms执行一次负责绘制圆[ updateLoader() ]的函数，直到圆被完全绘制为止。
onload = function() { cv = document.querySelector('#cvl'), ctx = cv.getContext('2d'); if (!!ctx) { s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector('#lbtn'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener('click', function() { tc = setInterval(updateLoader, 60); }); }}; 6.创建
现在是时候创建自定义的updateLoader()函数了，该函数将在单击按钮（触发事件setInterval()时由setInterval()方法调用 。 首先让我向您展示代码，然后我们再进行解释。
function updateLoader() { ctx.clearRect(0, 0, 16, 16); ctx.beginPath(); ctx.arc(8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke(); if (pct === 100) { clearInterval(tc); return; } pct++;} 方法清除由其参数定义的画布的矩形区域 ：左上角的（x，y）坐标。 clearRect(0, 0, 16, 16)行将擦除我们创建的16 * 16像素画布中的所有内容 。
在updateLoader()函数的末尾， 百分比计数[ pct ]递增1 ，在递增之前，我们检查其是否等于100 。 当它为100％时，将通过方法清除 setInterval() 计时器 （由计时器ID tc标识 。
方法的前三个参数是 中心 及其半径的（x，y）坐标 。 第四个和第五个参数代表弧的绘制开始和结束的起始角度和终止角度 。
我们已经确定了加载程序圆的起点，即角度s ，并且在所有迭代中都相同 。
但是，端角将随着百分比计数而增加 ，我们可以通过以下方式计算增量的大小 。 假设1％（100中的值1） 等于一个圆中2π的角度α （2π=整个圆周的角度），则可以将其写成以下等式：
1/100 = α/2π
重新排列方程式时：
α = 1 * 2π /100α = 2π/100
因此，1％等于一个圆角2π/ 100。 因此， 通过将2π/ 100乘以百分比值来计算每个百分比增量期间的终止角度。 然后将结果加到s （起始角度） ，因此每次都从相同的起始位置绘制圆弧。 这就是为什么我们使用pct * 2 * Math.PI / 100 + s公式来计算上面代码段中的终止角度的原因。
7.添加图标
让我们直接或通过JavaScript将favicon链接元素放入HTML <head>部分。
在updateLoader()函数中，首先我们使用querySelector()方法获取favicon ，并将其分配给lnk变量。 然后，每当使用方法将弧线绘制到 ，我们都需要导出画布图像 ，并将该数据URI内容分配为 图标图像 。 这将创建一个与画布加载程序相同的动画图标。
onload = function() { cv = document.querySelector('#cvl'), ctx = cv.getContext('2d'); if (!!ctx) { s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector('#lbtn'), lnk = document.querySelector('link[rel="icon"]'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener('click', function() { tc = setInterval(updateLoader, 60); }); }};function updateLoader() { ctx.clearRect(0, 0, 16, 16); ctx.beginPath(); ctx.arc(8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke(); lnk.href= cv.toDataURL('image/png'); if (pct === 100) { clearTimeout(tc); return; } pct++;} 您可以查看完整的代码。
奖励：将加载程序用于异步事件
当您需要将此画布动画与网页中的加载操作结合使用时 ，请将updateLoader()函数分配为action的事件的事件处理程序 。
例如，我们JavaScript 在AJAX中将像这样更改：
onload = function() { cv = document.querySelector('#cvl'), ctx = cv.getContext('2d'); if (!!ctx) { s = 1.5 * Math.PI, lnk = document.querySelector('link[rel="icon"]'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; } var xhr = new XMLHttpRequest(); xhr.addEventListener('progress', updateLoader); xhr.open('GET', 'https://xyz.com/abc'); xhr.send();};function updateLoader(evt) { ctx.clearRect(0, 0, 16, 16); ctx.beginPath(); ctx.arc(8, 8, 6, s, (evt.loaded*2*Math.PI/evt.total+s)); ctx.stroke(); lnk.href = cv.toDataURL('image/png');} 在arc()方法中，将百分比[ pct ]替换为事件的属性 -它表示已加载了多少文件，并使用ProgressEvent的属性代替了100该属性表示total要加载的金额。
在这种情况下， 不需要setInterval() ，因为在加载过程中会自动触发 progress()事件。
翻译自:
转载地址：http://nbezd.baihongyu.com/