posts - 23,&
comments - 6,&
trackbacks - 0
　网页图标（Favicon），就是页面标题前面的那个小图标，一般命名为&favicon.ico，存放在网站的根目录下面。这个功能最早由微软创设，目前主流的浏览器都支持。今天这篇文章教大家如何使用 Piecon&生成动感的网页图标加载动画，效果如下：
Piecon 基本原理
　　Piecon 是著名的代码托管平台 Github 上的开源库，能够动态生成饼图（Pie Charts）模式的网页图标，同时可以显示加载的百分比。它的灵感来源于动态控制网页图标的开源库&Tinycon，同样托管在 Github 上面。
　　Piecon 的基本原理是利用 HTML5 的 Canvas 标签绘制饼图并导出为图片，核心代码如下：
var drawFavicon = function(percentage) {
&&&&var canvas = getCanvas();
&&&&var context = canvas.getContext("2d");
&&&&var percentage = percentage || 0;
&&&&var src = currentF
&&&&var faviconImage = new Image();
&&&&faviconImage.onload = function() {
&&&&&&&&if (context) {
&&&&&&&&&&&&context.clearRect(0, 0, 16, 16);
&&&&&&&&&&&&
&&&&&&&&&&&&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.
&&&&&&&&&&&&context.fill();
&&&&&&&&&&&&
&&&&&&&&&&&&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.
&&&&&&&&&&&&context.fill();
&&&&&&&&&&&&
&&&&&&&&&&&&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.
&&&&&&&&&&&&&&&&context.fill();
&&&&&&&&&&&&}
&&&&&&&&&&&&setFaviconTag(canvas.toDataURL());
&&&&if (!src.match(/^data/)) {
&&&&&&&&faviconImage.crossOrigin = 'anonymous';
&&&&faviconImage.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/base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABuklEQVQ4T41Tv0vDUBC+1IAojdQq3VVwUSxSdVD8DQ5OWsFNcdTBdhF0UJD6D9j+BS5uom46aLE4WSSYQhFxEmxLl1YaQSUp8e6ZxPYlFh8c7+5e7nvfXb4nALcMwwhiagFtAm3QPFZwv0E7FwSBfHsJtQEWb2J8iObhgc24jPs+giSscxsAi08wuUQHhUIB8vk8qKoKY+E0fHZLUF3tA1+ESLF1iiDsWwaAxRHc4rquQyaTgVKpZBOYmU+DRzNYrA75oeViBcROL4VRYiKYPd9jQpRlua6YvqoFYCAjHSDdrZNL7UwTwC46B0Q7m83aN1sOD0D5t/i41c4eAVxhbtbtdjcGHItrAihiMpBKpUDTtH8x0CURxMo2a6MhgPiuw+SyDII5RAtd9zaBqO6wbhq20K5UILT16GBVM0jWwp9D7DrOQc/RqwOAHyJJN4nm5wc5EHuGwO2vJtgAh/0gpTcYfbQph5AURYFymX4xwOjaA7TmvmwGagiFdMkJyTrlpVx8eoHgXBKqzR746G1DKfeDL2pL+QxVGKZat8cUw7zP0fhPgmjTY4pb53UAlDSlvYiu23Omm+ue8zcnJOKk+8JFaQAAAABJRU5ErkJggg=="&
　　把&href&中的代码粘贴到浏览器地址栏回车即可看到图片，感兴趣的朋友可以试验一下。
Piecon 使用方法
　　相信大家看了前面的介绍之后，对&Piecon 的基本原理都了解了，那么它的使用方法就更简单了。
　　首页需要引入 piecon.js 文件：
&script src="piecon.js" type="text/javascript"&&/script&
　　然后设置 piecon 的显示选项，并周期性更新，代码如下：
(function(){
&&&&var count = 86;
&&&&Piecon.setOptions({
&&&&&&&&color: '#ff0084',
&&&&&&&&background: '#eee',
&&&&&&&&shadow: '#fff',
&&&&&&&&fallback: 'force'
&&&&var i = setInterval(function(){
&&&&&&&&if (++count & 100) { Piecon.reset(); clearInterval(i); return false; }
&&&&&&&&Piecon.setProgress(count);
&&&&}, 250);
　　setProgress 方法用于设置百分比，上面代码中我们初始设置百分比为86，也可以设置为0或者其它值：
Piecon.setProgress(12);
Piecon.setProgress(25);
Piecon.setProgress(50);
&　　浏览器兼容：因为使用了 HTML5 Canvas 标签，所以在 Chrome 中效果最好，Firefox 和 Opera 饼图会闪烁，Safari 和 IE 只能显示百分比。这个效果完整的代码如下：
&!doctype html&
&&&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); }
&&&&&&Piecon.setProgress(count);
&&&&}, 250);
&&&/script&
阅读(...) 评论()Chrome清理工具 v4.28.4 中文汉化版
所属专题：
软件大小：4.1MB
捆绑插件：无插件
软件语言：简体中文
软件等级：
软件授权：免费软件
制作发行：暂无
更新日期：
论坛转帖：
应用平台：Win 32位/64位
标签：&&&&&&
Chrome清理工具是一款Chrome(谷歌浏览器)专用的插件清理软件，可以扫描到Chrome浏览器中的所有插件，包括普通插件和恶意插件，支持一键卸载选定的插件，并可以一键清理浏览器缓存、cookie以及浏览记录，让您的Chrome浏览器更为清爽、安全。
Chrome清理工具使用方法
1、解压后打开软件，即可自动扫描Chrome浏览器
2、若没有安装Chrome会出现如下窗口
Chrome清理工具 v4.28.4 中文汉化版
相关软件&相关文章
本类人气榜&文章阅读榜
本周下载榜&总下载榜
Copyright &
AllRights Reserved冀ICP备Google Chrome DevTools Tool (F12 开发者工具)有没中文汉化版？或者在什么位置怎么汉化？源码哪里获取？_百度知道
Google Chrome DevTools Tool (F12 开发者工具)有没中文汉化版？或者在什么位置怎么汉化？源码哪里获取？
挺郁闷的，整体都有汉化了，就这个工具不汉化，看着蛋疼。找了下基本目录都没找到相关文件，网上的资料也很老版本.翻了Chrome官方没看到有关资料，开发社区看不懂找到了但是没有提有关语言的问题。谁知道么？
我有更好的答案
这就是firefox的天下了，浏览器开发者工具做的最好的就是firefox，这个是中文的你可以试试。IE,Google chrome, firefox谁都有特牛X的地方。
其他类似问题
为您推荐：
chrome的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁查看: 2639|回复: 5
Gestures for Chrome(TM)汉化版，鼠标手势扩展无法使用。
主题帖子积分
豹纹1827 枚
荣誉金币0 枚
该用户从未签到主题帖子积分
, 积分 77, 距离下一级还需 23 积分
, 积分 77, 距离下一级还需 23 积分
人气1617 分
豹纹1827 枚
猎豹自身的鼠标手势太不给力，无法自定义，所以想用Gestures for Chrome(TM)汉化版，奈何猎豹下无法使用，首先扩展本身没问题，其他基于chromium的都没问题，唯独猎豹不可以添加手势，要么下个版本兼容这个扩展，要么下个版本强化自定义手势，这是个基础功能，希望不要再拖了，辛苦了。
主题帖子积分
荣誉金币0 枚
该用户从未签到主题帖子积分
, 积分 63, 距离下一级还需 37 积分
, 积分 63, 距离下一级还需 37 积分
人气907 分
拜托了，如果你们的鼠标手势没那么快完成，就先允许我们用gestures好不好？？
主题帖子积分
豹纹800 枚
荣誉103 分
荣誉金币0 枚
该用户从未签到主题帖子积分
, 积分 73, 距离下一级还需 27 积分
, 积分 73, 距离下一级还需 27 积分
人气1235 分
荣誉103 分
豹纹800 枚
我也是这个意思，如果你们的鼠标手势没那么快完成，就先允许我们用gestures好不好？？这么简单的问题都要拖这么久，看来开发人员态度有问题吧
主题帖子积分
荣誉金币0 枚
该用户从未签到主题帖子积分
, 积分 43, 距离下一级还需 7 积分
, 积分 43, 距离下一级还需 7 积分
人气531 分
主题帖子积分
荣誉金币0 枚
该用户从未签到主题帖子积分
, 积分 7, 距离下一级还需 3 积分
, 积分 7, 距离下一级还需 3 积分
是啊 我也试了这插件 设置无效
什么功能都是 我们以后会有的
主题帖子积分
荣誉金币0 枚
该用户从未签到主题帖子积分
, 积分 7, 距离下一级还需 3 积分
, 积分 7, 距离下一级还需 3 积分
人气114 分
是啊，没有鼠标手势，真的用起来很不习惯！
日-8日注册论坛的会员
吐槽猎豹产品经理、调侃官方攻城狮！
Powered by