canvas绘制圆形进度条（或显示当前已浏览网页百分比）
使用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>
网页展示效果
