使用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. 安卓能用的modebus CRC16计算,附上对应的C语言的CRC16（转）

    源:安卓能用的modebus CRC16计算,附上对应的C语言的CRC16 “源”即是原文地址,想了解作都更多文章及思想请移步到“源”.转过只是为了本人感兴趣的文章查找方便. 正文: 最近写安卓串口通 ...

  2. 【转】国外程序员整理的Java资源大全

    Java几乎是许多程序员们的入门语言,并且也是世界上非常流行的编程语言.国外程序员Andreas Kull在其Github上整理了非常优秀的Java开发资源,推荐给大家.译文由ImportNew- 唐 ...

  3. Android动画之translate(位移动画)(转)

    转自:http://www.cnblogs.com/bavariama/archive/2013/01/29/2881225.html 上一篇文章讲了 Android的左右滑动切换,实现过程是非常简单 ...

  4. 优酷、YouTube、Twitter及JustinTV几个视频网站的架构

      优酷视频网站架构 一.网站基本数据概览据2010年统计,优酷网日均独立访问人数(uv)达到了8900万,日均访问量(pv)更是达到了17亿,优酷凭借这一数据成为google榜单中国内视频网站排名最 ...

  5. iOS 添加导航栏两侧按钮

    self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"首页" style ...

  6. H-W平衡

    hardy-weinberg平衡:标准定义————如果一个种群符合下列条件:1.种群是极大的:2.种群个体间的交配是随机的,也就是说种群中每一个个体与种群中其他个体的交配机会是相等的:3.没有突变产生 ...

  7. iOS 之 自动释放池

    向一个对象发送autorelease消息时,cocoa会将该对象的一个引用放入最新的自动释放池.作用域结束时,自动释放池会被释放,池中所有的对象也就被释放了.

  8. CSS图形形状大全

    The Shapes of CSS All of the below use only a single HTML element. Any kind of CSS goes, as long as ...

  9. ThinkPHP创建应用的一般开发流程

    使用ThinkPHP创建应用的一般开发流程是: 系统设计.创建数据库和数据表:(可选) 项目命名并创建项目入口文件,开启调试模式: 完成项目配置: 创建项目函数库:(可选) 开发项目需要的扩展(模式. ...

  10. c#异步和多线程有什么区别和联系？

    异步和多线程可以说没有必然的联系,只能说异步可以通过多线程实现而已要理解这些东西,你得具备很多相关的知识,操作系统原理,编译原理等简单地来说,计算机或者说CPU执行你的代码都是顺序执行的,当前的语句没 ...