網(wǎng)頁(yè)圖標(biāo)（Favicon），就是頁(yè)面標(biāo)題前面的那個(gè)小圖標(biāo)，一般命名為 favicon.ico，存放在網(wǎng)站的根目錄下面。這個(gè)功能最早由微軟創(chuàng)設(shè)，目前主流的瀏覽器都支持。今天這篇文章教大家如何使用 Piecon 生成動(dòng)感的網(wǎng)頁(yè)圖標(biāo)加載動(dòng)畫(huà)，效果如下：
Piecon 基本原理
Piecon 是著名的代碼托管平臺(tái) Github 上的開(kāi)源庫(kù)，能夠動(dòng)態(tài)生成餅圖（Pie Charts）模式的網(wǎng)頁(yè)圖標(biāo)，同時(shí)可以顯示加載的百分比。它的靈感來(lái)源于動(dòng)態(tài)控制網(wǎng)頁(yè)圖標(biāo)的開(kāi)源庫(kù) Tinycon，同樣托管在 Github 上面。
Piecon 的基本原理是利用 HTML5 的 Canvas 標(biāo)簽繪制餅圖并導(dǎo)出為圖片，核心代碼如下：
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/1305if (!src.match(/^data/)) {
faviconImage.crossOrigin = 'anonymous';
}
faviconImage.src = src;
};
生成URL形式的圖片然后設(shè)置到 Favicon 的URL上并使用 setInterval 函數(shù)周期性更新。所以 Piecon 顯示的加載進(jìn)度效果并不是網(wǎng)頁(yè)上實(shí)際內(nèi)容的加載進(jìn)度，只是一種模擬效果。例如我們平常配置網(wǎng)頁(yè)圖標(biāo)的代碼如下：
<link type="image/x-icon" rel="icon" href="favicon.ico">
使用 Piecon 生成的餅圖模式的網(wǎng)頁(yè)圖標(biāo)是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 中的代碼粘貼到瀏覽器地址欄回車(chē)即可看到圖片，感興趣的朋友可以試驗(yàn)一下。
點(diǎn)擊測(cè)試Piecon 使用方法
相信大家看了前面的介紹之后，對(duì) Piecon 的基本原理都了解了，那么它的使用方法就更簡(jiǎn)單了。
首頁(yè)需要引入 piecon.js 文件：
1
<script src="piecon.js" type="text/javascript"></script>
然后設(shè)置 piecon 的顯示選項(xiàng)，并周期性更新，代碼如下：
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', // 餅圖外環(huán)顏色
fallback: 'force' // true：顯示餅圖, false：顯示百分比, 'force'：同時(shí)顯示餅圖和百分比)
});
var i = setInterval(function(){
if (++count > 100) { Piecon.reset(); clearInterval(i); return false; }
Piecon.setProgress(count);
}, 250);
})();
setProgress 方法用于設(shè)置百分比，上面代碼中我們初始設(shè)置百分比為86，也可以設(shè)置為0或者其它值：
1
2
3
Piecon.setProgress(12);
Piecon.setProgress(25);
Piecon.setProgress(50);
瀏覽器兼容：因?yàn)槭褂昧?HTML5 Canvas 標(biāo)簽，所以在 Chrome 中效果最好，F(xiàn)irefox 和 Opera 餅圖會(huì)閃爍，Safari 和 IE 只能顯示百分比。這個(gè)效果完整的代碼如下：
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>
點(diǎn)擊預(yù)覽效果 下載示例代碼
