使用canvas绘制圆形进度条，或者是网页加载进度条 或者是显示你浏览了本网页多少……

由于个浏览器的计算差异，打开浏览器时 初始值有所不同，但是当拉倒网页底部时，均显示100%。

兼容性：测试浏览器 chrome 、ff 、ie9+ 都可以正常显示 ，由于ie8及以下不支持canvas 不做考虑。

设计思路：

　　1 .在画布上画一个圆，作为背景圆

　　2 .画第二个圆坐标相同半径相同，作为进度圆，显示当前浏览进度

　　3 .使用canvas的font属性在圆中间以数字的形式显示进度 ，以百分比来显示进度

　　4 .计算

　　　　网页高度：H=document.body.scrollHeight;

　　　　可视区高度：clientH=document.documentElement.clientHeight || document.body.scrollHeight;

　　　　滚动高度：scrollT=document.documentElement.scrollTop || document.body.scrollTop;

　　　　计算比例：scale=(clientH+scrollT)/H; --->结果是小数形式，需要转成百分比形式，可以写一个方法

代码分析　

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <script>

         //小数转百分数

         function toPercent(point){

             var str = Number(point*100).toFixed(2);

             if (str < 10) {

                 return '0'+str+'%';

             }

             return str+'%';

         }

         // 角度转弧度

         function d2a(n){

             return n*Math.PI/180;

         }

         // 圆形进度条方法封装

         function  pageView(oC){

             var H = document.documentElement.scrollHeight || document.body.scrollHeight;

             var clientH = document.documentElement.clientHeight;

             var scrollT = document.documentElement.scrollTop || document.body.scrollTop;

             //浏览进度 比例

             var scale = (clientH+scrollT)/H ;

             var ctx = oC.getContext('2d');

             // 公共样式 ，清空画布

             ctx.clearRect(0,0,oC.width,oC.height);

             // 背景圆

             ctx.beginPath();

             ctx.lineWidth = 10;

             ctx.arc(150,150,100,d2a(0),d2a(360),false);

             ctx.strokeStyle = 'skyblue';

             ctx.stroke();

             // 进度圆

             ctx.beginPath();

             ctx.arc(150,150,100,d2a(-90),d2a(scale*360-90),false)

             ctx.strokeStyle = 'rgb('+Math.floor(scale*255)+','+Math.floor(scale*201)+',163)' // 变化的颜色，可写成固定颜色

             ctx.stroke();

             // 显示百分比

             ctx.beginPath();

             var percent = toPercent(scale);

             ctx.lineWidth = 2;

             ctx.font = '40px Microsoft YaHei';

             ctx.strokeStyle = '#d1d39e';

             ctx.strokeText(percent,85,165)

         }

         window.onload = window.onresize = window.onscroll = function(){

             var oC = document.getElementById('canvas');

             pageView(oC) //调用

         }

     </script>

 </head>

 <body style="height: 3000px">

     <canvas width="300" height="300" id="canvas" style="position: fixed; left: 30px ;bottom: 50px;">

         <span>您的浏览器不支持canvas</span>

     </canvas>

 </body>

 </html>

 网页展示效果

　　　　

　　

canvas绘制圆形进度条（或显示当前已浏览网页百分比）的更多相关文章

  1. HTML5效果：Canvas 实现圆形进度条并显示数字百分比

    实现效果 1.首先创建html代码 <canvas id="canvas" width="500" height="500" styl ...

  2. canvas 绘制圆形进度条

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. canvas 绘制环形进度条

    结果: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...

  4. html5 canvas绘制环形进度条，环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

  5. css and canvas实现圆形进度条

    进度条效果:   话不多说,上代码 使用css动画实现,看到一篇博客的启发,稍微修改了下, css实现的原理是用两个半圆一开始隐藏,再分别旋转180度,最后成为一个整圆 半圆效果,一开始右边的半圆在盒 ...

  6. canvas绘制环形进度条

    <!DOCTYPE html> <html > <head> <meta http-equiv="content-type" conten ...

  7. Android 自定义 View 圆形进度条总结

    Android 自定义圆形进度条总结 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 微信公众号:牙锅子 源码:CircleProgress 文中如有纰漏,欢迎大家留言指出. 最近 ...

  8. canvas圆形进度条

    通过定义一个canvas标签, new方法传进ID值,和旋转角度值,即可生成圆形进度条 <!DOCTYPE html> <html lang="en"> & ...

  9. 【Android 应用开发】 自定义 圆形进度条 组件

    转载著名出处 : http://blog.csdn.net/shulianghan/article/details/40351487 代码下载 : -- CSDN 下载地址 : http://down ...

随机推荐

  1. mysql之SQL---存储过程

    1.存储过程简介  我们常用的操作数据库语言SQL语句在执行的时候需要要先编译,然后执行,而存储过程(Stored Procedure)是一组为了完成特定功能的SQL语句集,经编译后存储在数据库中,用 ...

  2. mysql迁移-----拷贝mysql目录/load data/mysqldump/into outfile

    摘要:本文简单介绍了mysql的三种备份,并解答了有一些实际备份中会遇到的问题.备份恢复有三种(除了用从库做备份之外), 直接拷贝文件,load data 和 mysqldump命令.少量数据使用my ...

  3. MongoDB 3.0 WiredTiger Compression and Performance

    MongoDB3.0中的压缩选项 在MongoDB 3.0中,WiredTiger为集合提供三个压缩选项: 无压缩 Snappy(默认启用) – 很不错的压缩,有效利用资源 zlib(类似gzip) ...

  4. Http协议与TCP协议理解

    TCP协议对应于传输层,而HTTP协议对应于应用层,从本质上来说,二者没有可比性.Http协议是建立在TCP协议基础之上的,当浏览器需要从服务器获取网页数据的时候,会发出一次Http请求.Http会通 ...

  5. MySQL 表的命令

    1.查看表的结构: desc 表名; show columns from 表名; describe 表名; show create table 表名; 2.修改表名 rename table 原表名 ...

  6. IOS开发者证书申请及应用上线发布详解(2014版)

    其实一直以来我都想做一个最齐全的上传应用到appstore的教程,但一直狠不下心,今天凌晨2点12分,我鼓起勇气写教程,来吧不多说.登录开发者中心:http://developer.apple.com ...

  7. ios数据存储——对象归档

    归档:数据从内存与闪存相互转化,类似“序列化”,将数据转换成二进制字节数据 操作:有两种方式,第一种是单个对象作为root进行归档和恢复,一个对象一个文件:第二种,可以同时归档多个对象到一个文件 注意 ...

  8. 【转】mysql-5..6.23-win64.zip安装及配置

    [强烈建议!!!!]把文件夹的名字也改成如下所说的,不然即使你什么环境配置都对,启动服务的时候依然会出现‘net’不是计算机内部或外部的命令这种令人很郁闷的问题了! 原文链接:http://jingy ...

  9. java系列--I/O流

    java.io类 一.I/O流 1.流的概念 二. InputStream --此抽象类是表示字节输入流的所有类的超类. 1.public int read(byte[] b) throws IOEx ...

  10. diskpart修改盘符

    开机运行一批处理.内容如下:diskpart /s c:\disk.txt c:\disk.txt内容如下:select disk 1            #1选择第二个硬盘 0选择第二个硬盘sel ...