讓你的網頁圖示（Favicon）變成動感的餅圖動畫

　網頁圖示（Favicon），就是頁面标題前面的那個小圖示，一般命名為 favicon.ico，存放在網站的根目錄下面。這個功能最早由微軟創設，目前主流的浏覽器都支援。今天這篇文章教大家如何使用 Piecon 生成動感的網頁圖示加載動畫，效果如下：

<a href="http://www.cnblogs.com/lhb25/admin/%E3%80%90%E7%BD%91%E9%A1%B5%E6%95%88%E6%9E%9C%E5%AE%9E%E6%88%98%E3%80%91%E8%AE%A9%E4%BD%A0%E7%9A%84%E7%BD%91%E9%A1%B5%E5%9B%BE%E6%A0%87%EF%BC%88Favicon%EF%BC%89%E5%8F%98%E6%88%90%E5%8A%A8%E6%84%9F%E7%9A%84%E9%A5%BC%E5%9B%BE%E5%8A%A8%E7%94%BB"></a>

　　Piecon 是著名的代碼托管平台 Github 上的開源庫，能夠動态生成餅圖（Pie Charts）模式的網頁圖示，同時可以顯示加載的百分比。它的靈感來源于動态控制網頁圖示的開源庫 Tinycon，同樣托管在 Github 上面。

　　Piecon 的基本原理是利用 HTML5 的 Canvas 标簽繪制餅圖并導出為圖檔，核心代碼如下：

<a href="http://blog.51cto.com/lihongbo/1060711#">?</a>

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

<code>var</code> <code>drawFavicon = </code><code>function</code><code>(percentage) {</code>

<code>    </code><code>var</code> <code>canvas = getCanvas();</code>

<code>    </code><code>var</code> <code>context = canvas.getContext(</code><code>"2d"</code><code>);</code>

<code>    </code><code>var</code> <code>percentage = percentage || 0;</code>

<code>    </code><code>var</code> <code>src = currentFavicon;</code>

<code>    </code><code>var</code> <code>faviconImage = </code><code>new</code> <code>Image();</code>

<code>    </code><code>faviconImage.onload = </code><code>function</code><code>() {</code>

<code>        </code><code>if</code> <code>(context) {</code>

<code>            </code><code>context.clearRect(0, 0, 16, 16);</code>

<code>            </code><code>// Draw shadow</code>

<code>            </code><code>context.beginPath();</code>

<code>            </code><code>context.moveTo(canvas.width / 2, canvas.height / 2);</code>

<code>            </code><code>context.arc(canvas.width / 2, canvas.height / 2, Math.min(canvas.width / 2, canvas.height / 2), 0, Math.PI * 2, </code><code>false</code><code>);</code>

<code>            </code><code>context.fillStyle = options.shadow;</code>

<code>            </code><code>context.fill();</code>

<code>            </code><code>// Draw background</code>

<code>            </code><code>context.arc(canvas.width / 2, canvas.height / 2, Math.min(canvas.width / 2, canvas.height / 2) - 2, 0, Math.PI * 2, </code><code>false</code><code>);</code>

<code>            </code><code>context.fillStyle = options.background;</code>

<code>            </code><code>// Draw pie</code>

<code>            </code><code>if</code> <code>(percentage &gt; 0) {</code>

<code>                </code><code>context.beginPath();</code>

<code>                </code><code>context.moveTo(canvas.width / 2, canvas.height / 2);</code>

<code>                </code><code>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, </code><code>false</code><code>);</code>

<code>                </code><code>context.lineTo(canvas.width / 2, canvas.height / 2);</code>

<code>                </code><code>context.fillStyle = options.color;</code>

<code>                </code><code>context.fill();</code>

<code>            </code><code>}</code>

<code>            </code><code>setFaviconTag(canvas.toDataURL());</code>

<code>        </code><code>}</code>

<code>    </code><code>};</code>

<code>    </code><code>// allow cross origin resource requests if the image is not a data:uri</code>

<code>    </code><code>// as detailed here: https://github.com/mrdoob/three.js/issues/1305</code>

<code>    </code><code>if</code> <code>(!src.match(/^data/)) {</code>

<code>        </code><code>faviconImage.crossOrigin = </code><code>'anonymous'</code><code>;</code>

<code>    </code><code>}</code>

<code>    </code><code>faviconImage.src = src;</code>

<code>};</code>

　　生成URL形式的圖檔然後設定到 Favicon 的URL上并使用 setInterval 函數周期性更新。是以 Piecon 顯示的加載進度效果并不是網頁上實際内容的加載進度，隻是一種模拟效果。例如我們平常配置網頁圖示的代碼如下：

　　使用 Piecon 生成的餅圖模式的網頁圖示是Base64編碼的URL字元串，代碼如下：

 　　

　　

　　相信大家看了前面的介紹之後，對 Piecon 的基本原理都了解了，那麼它的使用方法就更簡單了。

　　首頁需要引入 piecon.js 檔案：

<code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"piecon.js"</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

　　然後設定 piecon 的顯示選項，并周期性更新，代碼如下：

<code>(</code><code>function</code><code>(){</code>

<code>    </code><code>var</code> <code>count = 86;</code>

<code>    </code><code>Piecon.setOptions({</code>

<code>        </code><code>color: </code><code>'#ff0084'</code><code>, </code><code>// 餅圖顔色</code>

<code>        </code><code>background: </code><code>'#eee'</code><code>, </code><code>// 餅圖空白部分的顔色</code>

<code>        </code><code>shadow: </code><code>'#fff'</code><code>, </code><code>// 餅圖外環顔色</code>

<code>        </code><code>fallback: </code><code>'force'</code> <code>// true：顯示餅圖, false：顯示百分比, 'force'：同時顯示餅圖和百分比)</code>

<code>    </code><code>});</code>

<code>    </code><code>var</code> <code>i = setInterval(</code><code>function</code><code>(){</code>

<code>        </code><code>if</code> <code>(++count &gt; 100) { Piecon.reset(); clearInterval(i); </code><code>return</code> <code>false</code><code>; }</code>

<code>        </code><code>Piecon.setProgress(count);</code>

<code>    </code><code>}, 250);</code>

<code>})();</code>

　　setProgress 方法用于設定百分比，上面代碼中我們初始設定百分比為86，也可以設定為0或者其它值：

<code>Piecon.setProgress(12);</code>

<code>Piecon.setProgress(25);</code>

<code>Piecon.setProgress(50);</code>

 　　浏覽器相容：因為使用了 HTML5 Canvas 标簽，是以在 Chrome 中效果最好，Firefox 和 Opera 餅圖會閃爍，Safari 和 IE 隻能顯示百分比。這個效果完整的代碼如下：

<code>&lt;!doctype html&gt;</code>

<code>&lt;</code><code>html</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>  </code><code>&lt;</code><code>title</code><code>&gt;Piecon&lt;/</code><code>title</code><code>&gt;</code>

<code>  </code><code>&lt;</code><code>link</code> <code>rel</code><code>=</code><code>"icon"</code> <code>href</code><code>=</code><code>"favicon.ico"</code> <code>/&gt;</code>

<code>  </code><code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"piecon.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>  </code><code>&lt;</code><code>script</code><code>&gt;</code>

<code>  </code><code>(function(){</code>

<code>    </code><code>var count = 86;</code>

<code>        </code><code>color: '#ff0084',</code>

<code>        </code><code>background: '#eee',</code>

<code>        </code><code>shadow: '#fff',</code>

<code>        </code><code>fallback: false</code>

<code>    </code><code>var i = setInterval(function(){</code>

<code>      </code><code>if (++count &gt; 100) { Piecon.reset(); clearInterval(i); return false; }</code>

<code>      </code><code>Piecon.setProgress(count);</code>

<code>  </code><code>})();</code>

<code>  </code><code>&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

本文轉自山邊小溪 51CTO部落格，原文連結：http://blog.51cto.com/lihongbo/1060711，如需轉載請自行聯系原作者