AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

让你的网页图标（Favicon）变成动感的饼图动画

2017-11-14 1574
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

　网页图标（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        

<html>

<head>

 <title>Piecontitle>        

       

 <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，如需转载请自行联系原作者


文章标签：
Web App开发
前端开发
科技小先锋
目录
相关文章
anxin
|
新零售 城市大脑 分布式计算
阿里云2019北京峰会之我见（商业篇）
整场大会听下来，我用两个字来总结那就是”共赢“。 希望大家都能赢！
anxin
4535 0
No-oN
|
12月前
|
编解码 自然语言处理 语音技术
神经codec模型相关论文
本文汇总了近年来在神经音频编解码器和语音语言模型领域的多项重要研究，涵盖从2020年到2024年的最新进展。这些研究包括端到端的音频编解码器、高效音频生成、高保真音频压缩、多模态表示学习等。每项研究都提供了详细的论文链接、代码和演示页面，方便读者深入了解和实验。例如，SoundStream（2021）提出了一种端到端的神经音频编解码器，而AudioLM（2022）则通过语言建模方法生成音频。此外，还有多个项目如InstructTTS、AudioDec、HiFi-Codec等，分别在表达性TTS、开源高保真音频编解码器和高保真音频压缩方面取得了显著成果。
No-oN
480 13
东方睿赢
|
移动开发 JavaScript 前端开发
Phaser和Three.js是两个非常流行的JavaScript游戏框架
【5月更文挑战第14天】Phaser是开源的2D游戏引擎，适合HTML5游戏开发，内置物理引擎和强大的图形渲染功能，适用于消消乐等2D游戏。Three.js是基于WebGL的3D库，用于创建3D场景和应用，支持各种3D对象和交互功能，广泛应用于游戏、可视化等领域。选择框架取决于项目需求，2D选Phaser，3D选Three.js。
东方睿赢
271 4
球球不吃虾
|
前端开发 JavaScript 安全
第十篇 Axios最佳实战：前端HTTP通信的王者之选
第十篇 Axios最佳实战：前端HTTP通信的王者之选
球球不吃虾
566 0
yqcoder
|
JavaScript 前端开发
前端 JS 经典：统一 Vite 中图片转换逻辑
前端 JS 经典：统一 Vite 中图片转换逻辑
yqcoder
347 0
G佳伟
|
移动开发 JavaScript
thinkPHP5.0开发微信H5页面分享接口signature验证失败，signature与微信 JS 接口签名校验工具返回结果不一致
thinkPHP5.0开发微信H5页面分享接口signature验证失败，signature与微信 JS 接口签名校验工具返回结果不一致
G佳伟
259 0
懒大王敲代码
|
网络协议 安全 网络架构
无需公网IP联机Minecraft，我的世界服务器本地搭建教程
无需公网IP联机Minecraft，我的世界服务器本地搭建教程
懒大王敲代码
2484 1
你挚爱的强哥
|
Web App开发 移动开发 JavaScript
【Vue版】实现拖拽、排序效果（注意，这个方法在chrome谷歌浏览器上面不适用，dragend会情不自禁触发drag事件先执行，有点像浏览器的一个bug）
【Vue版】实现拖拽、排序效果（注意，这个方法在chrome谷歌浏览器上面不适用，dragend会情不自禁触发drag事件先执行，有点像浏览器的一个bug）
你挚爱的强哥
511 0
微服务和网关
|
存储 Prometheus Kubernetes
云原生网关部署新范式丨 Higress 发布 1.1 版本，支持脱离 K8s 部署
基于 Nacos 的注册中心/配置中心能力，实现了无需依赖 K8s，也能使用 Ingress API 管理网关路由。
微服务和网关
1443 0
带你读小助手
|
SQL 弹性计算 分布式计算
使用EMR+DLF+OSS-HDFS进行数据湖分析
本实验通过使用EMR，搭建EMR集群，对OSS-HDFS进行数据湖分析
带你读小助手
1141 0

热门文章

最新文章

  • 1
    java实现图片与base64转换
  • 2
    OpenSearch大模型实践之Havenask篇
  • 3
    Pycharm2022最新版安装破解与激活教程，亲测可用
  • 4
    阿里云内网可用的dns
  • 5
    Linux的root账号忘记密码怎么办？看这一篇就够了！
  • 6
    使用阿里云容器服务Jenkins 2.0实现持续集成之the tag you want篇(updated on 2017.09.06)
  • 7
    Skia深入分析8——Skia的GPU绘图
  • 8
    1918年就诞生了比Zoom酷太多的视频聊天设想！而那时才刚有无线电
  • 9
    Windows Phone 7 网络编程之留言板应用
  • 10
    Linux驱动 读写文件【转】
  • 1
    构建AI智能体：三十八、告别“冷启动”：看大模型如何解决推荐系统的世纪难题
    63
  • 2
    HTML文档的基本结构：构建网页的基石
    81
  • 3
    BipedalWalker实战：SAC算法如何让机器人学会稳定行走
    161
  • 4
    快速恢复ie浏览器的正常使用
    60
  • 5
    云原生日志监控体系怎么做才不崩？一篇给你讲透采集、存储、分析、告警的最佳实践
    55
  • 6
    Prometheus 撑不住了？上 Thanos、Cortex、M3！一篇给你讲明白大规模监控的江湖
    53
  • 7
    ETL vs ELT：到底谁更牛？别被名字骗了，这俩是两种世界观
    52
  • 8
    告别繁琐判断：用PHP 8的匹配表达式优雅你的代码
    39
  • 9
    告别繁琐include！PHP自动加载优化全攻略
    146
  • 10
    告别混乱：用PHP 8的Match表达式优雅地简化你的条件逻辑
    26

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云负载均衡收费标准：ALB、NLB和CLB价格，包括LCU费用、实例费和公网带宽价格