canvas绘制圆形进度条（或显示当前已浏览网页百分比）

最新推荐文章于 2021-01-17 16:15:00 发布

Q18210994339

最新推荐文章于 2021-01-17 16:15:00 发布

阅读量178

点赞数

原文链接：http://www.cnblogs.com/NTWang/p/6390884.html

版权

使用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; --->结果是小数形式，需要转成百分比形式，可以写一个方法

代码分析　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script>
 7         //小数转百分数
 8         function toPercent(point){
 9             var str = Number(point*100).toFixed(2);
10             if (str < 10) {
11                 return '0'+str+'%';
12             }
13             return str+'%';
14         }
15         // 角度转弧度
16         function d2a(n){
17             return n*Math.PI/180;
18         }
19         // 圆形进度条方法封装
20         function  pageView(oC){
21             var H = document.documentElement.scrollHeight || document.body.scrollHeight;
22             var clientH = document.documentElement.clientHeight;
23             var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
24 
25             //浏览进度 比例
26             var scale = (clientH+scrollT)/H ;
27             var ctx = oC.getContext('2d');
28             // 公共样式 ，清空画布
29             ctx.clearRect(0,0,oC.width,oC.height);
30 
31             // 背景圆
32             ctx.beginPath();
33             ctx.lineWidth = 10;
34             ctx.arc(150,150,100,d2a(0),d2a(360),false);
35             ctx.strokeStyle = 'skyblue';
36             ctx.stroke();
37 
38             // 进度圆
39             ctx.beginPath();
40             ctx.arc(150,150,100,d2a(-90),d2a(scale*360-90),false)
41             ctx.strokeStyle = 'rgb('+Math.floor(scale*255)+','+Math.floor(scale*201)+',163)' // 变化的颜色，可写成固定颜色
42             ctx.stroke();
43 
44             // 显示百分比
45             ctx.beginPath();
46             var percent = toPercent(scale);
47             ctx.lineWidth = 2;
48             ctx.font = '40px Microsoft YaHei';
49             ctx.strokeStyle = '#d1d39e';
50             ctx.strokeText(percent,85,165)
51         
52         }
53         window.onload = window.onresize = window.onscroll = function(){
54 
55             var oC = document.getElementById('canvas');
56             pageView(oC) //调用
57         
58         }
59     </script>
60 </head>
61 <body style="height: 3000px">
62     <canvas width="300" height="300" id="canvas" style="position: fixed; left: 30px ;bottom: 50px;">
63         <span>您的浏览器不支持canvas</span>
64     </canvas>
65     
66 </body>
67 </html>