网页图标（Favicon），就是页面标题前面的那个小图标，一般命名为 favicon.ico，存放在网站的根目录下面。这个功能最早由微软创设，目前主流的浏览器都支持。今天这篇文章教大家如何使用 Piecon 生成动感的网页图标加载动画，效果如下：
Piecon 基本原理
Piecon 是著名的代码托管平台 Github 上的开源库，能够动态生成饼图（Pie Charts）模式的网页图标，同时可以显示加载的百分比。它的灵感来源于动态控制网页图标的开源库 Tinycon，同样托管在 Github 上面。
Piecon 的基本原理是利用 HTML5 的 Canvas 标签绘制饼图并导出为图片，核心代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
var
drawFavicon =
function
(percentage) {
var
canvas = getCanvas();
var
context = canvas.getContext(
"2d"
);
var
percentage = percentage || 0;
var
src = currentFavicon;
var
faviconImage =
new
Image();
faviconImage.onload =
function
() {
if
(context) {
context.clearRect(0, 0, 16, 16);
// Draw shadow
context.beginPath();
context.moveTo(canvas.width / 2, canvas.height / 2);
context.arc(canvas.width / 2, canvas.height / 2, Math.min(canvas.width / 2, canvas.height / 2), 0, Math.PI * 2,
false
);
context.fillStyle = options.shadow;
context.fill();
// Draw background
context.beginPath();
context.moveTo(canvas.width / 2, canvas.height / 2);
context.arc(canvas.width / 2, canvas.height / 2, Math.min(canvas.width / 2, canvas.height / 2) - 2, 0, Math.PI * 2,
false
);
context.fillStyle = options.background;
context.fill();
// Draw pie
if
(percentage > 0) {
context.beginPath();
context.moveTo(canvas.width / 2, canvas.height / 2);
context.arc(canvas.width / 2, canvas.height / 2, Math.min(canvas.width / 2, canvas.height / 2) - 2, (-0.5) * Math.PI, (-0.5 + 2 * percentage / 100) * Math.PI,
false
);
context.lineTo(canvas.width / 2, canvas.height / 2);
context.fillStyle = options.color;
context.fill();
}
setFaviconTag(canvas.toDataURL());
}
};
// allow cross origin resource requests if the image is not a data:uri
// as detailed here: https://github.com/mrdoob/three.js/issues/1305
if
(!src.match(/^data/)) {
faviconImage.crossOrigin =
'anonymous'
;
}
faviconImage.src = src;
};
|
生成URL形式的图片然后设置到 Favicon 的URL上并使用 setInterval 函数周期性更新。所以 Piecon 显示的加载进度效果并不是网页上实际内容的加载进度，只是一种模拟效果。例如我们平常配置网页图标的代码如下：
<link type="image/x-icon" rel="icon" href="favicon.ico">
使用 Piecon 生成的饼图模式的网页图标是Base64编码的URL字符串，代码如下：
<link type="image/x-icon" rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABuklEQVQ4T41Tv0vDUBC+1IAojdQq3VVwUSxSdVD8DQ5OWsFNcdTBdhF0UJD6D9j+BS5uom46aLE4WSSYQhFxEmxLl1YaQSUp8e6ZxPYlFh8c7+5e7nvfXb4nALcMwwhiagFtAm3QPFZwv0E7FwSBfHsJtQEWb2J8iObhgc24jPs+giSscxsAi08wuUQHhUIB8vk8qKoKY+E0fHZLUF3tA1+ESLF1iiDsWwaAxRHc4rquQyaTgVKpZBOYmU+DRzNYrA75oeViBcROL4VRYiKYPd9jQpRlua6YvqoFYCAjHSDdrZNL7UwTwC46B0Q7m83aN1sOD0D5t/i41c4eAVxhbtbtdjcGHItrAihiMpBKpUDTtH8x0CURxMo2a6MhgPiuw+SyDII5RAtd9zaBqO6wbhq20K5UILT16GBVM0jWwp9D7DrOQc/RqwOAHyJJN4nm5wc5EHuGwO2vJtgAh/0gpTcYfbQph5AURYFymX4xwOjaA7TmvmwGagiFdMkJyTrlpVx8eoHgXBKqzR746G1DKfeDL2pL+QxVGKZat8cUw7zP0fhPgmjTY4pb53UAlDSlvYiu23Omm+ue8zcnJOKk+8JFaQAAAABJRU5ErkJggg==">
把 href 中的代码粘贴到浏览器地址栏回车即可看到图片，感兴趣的朋友可以试验一下。点击测试
Piecon 使用方法
相信大家看了前面的介绍之后，对 Piecon 的基本原理都了解了，那么它的使用方法就更简单了。
首页需要引入 piecon.js 文件：
|
1
|
<
script
src
=
"piecon.js"
type
=
"text/javascript"
></
script
>
|
然后设置 piecon 的显示选项，并周期性更新，代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
(
function
(){
var
count = 86;
Piecon.setOptions({
color:
'#ff0084'
,
// 饼图颜色
background:
'#eee'
,
// 饼图空白部分的颜色
shadow:
'#fff'
,
// 饼图外环颜色
fallback:
'force'
// true：显示饼图, false：显示百分比, 'force'：同时显示饼图和百分比)
});
var
i = setInterval(
function
(){
if
(++count > 100) { Piecon.reset(); clearInterval(i);
return
false
; }
Piecon.setProgress(count);
}, 250);
})();
|
setProgress 方法用于设置百分比，上面代码中我们初始设置百分比为86，也可以设置为0或者其它值：
|
1
2
3
|
Piecon.setProgress(12);
Piecon.setProgress(25);
Piecon.setProgress(50);
|
浏览器兼容：因为使用了 HTML5 Canvas 标签，所以在 Chrome 中效果最好，Firefox 和 Opera 饼图会闪烁，Safari 和 IE 只能显示百分比。这个效果完整的代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!doctype html>
<
html
>
<
head
>
<
title
>Piecon</
title
>
<
link
rel
=
"icon"
href
=
"favicon.ico"
/>
<
script
src
=
"piecon.js"
></
script
>
<
script
>
(function(){
var count = 86;
Piecon.setOptions({
color: '#ff0084',
background: '#eee',
shadow: '#fff',
fallback: false
});
var i = setInterval(function(){
if (++count > 100) { Piecon.reset(); clearInterval(i); return false; }
Piecon.setProgress(count);
}, 250);
})();
</
script
>
</
head
>
<
body
>
</
body
>
</
html
>
|
本文转自山边小溪 51CTO博客，原文链接：http://blog.51cto.com/lihongbo/1060711，如需转载请自行联系原作者
