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

代码分析 

 <!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绘制圆形进度条(或显示当前已浏览网页百分比)

    

  

上一篇:vim: vim快捷键


下一篇:poj 3984 迷宫问题 bfs