用 Canvas 画出浏览页面的进度

之前写过一个获取页面进度的代码

这次写的代码是将页面浏览的百分比展示到页面中，从0°到360°按照百分比显示。

用的是 html5 中的 canvas。

第一步：在页面上创建一个Canvas画布元素。
第二步：画一个圆形。
第三步：画一个扇形。
第四步：画一个小一点的圆形，这样就有一个带颜色的圆环。
第五步：圆中心写入进度文字。

全部代码：

<canvas id="process" style="position:fixed;bottom:0;left:0;">0%</canvas>
<script type="text/javascript">
    getprocess();
    drawcircle();
    function drawcircle() {
        var canvas = g("process");
        var process = canvas.innerHTML.replace("%", "");

//定义圆的属性
        var circle = {
            x: 25,
            y: 25,
            r: 25
        }
        var context = canvas.getContext('2d');
        canvas.imageSmoothingEnabled = true;
        canvas.width = 50;
        canvas.height = 50;
//canvas.
        context.clearRect(0, 0, circle.x, circle.y);
        context.beginPath();

// 坐标移动到圆心，画个填充颜色圆
        context.moveTo(circle.x, circle.y);
        context.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, false);
        context.fillStyle = '#e6e6e6';
        context.fill();

//画进度，其实是画扇形
        context.beginPath();
        context.moveTo(circle.x, circle.y);
        context.arc(circle.x, circle.y, circle.r, -0.5 * Math.PI, -0.5 * Math.PI + Math.PI * 2 * process / 100, false);
        context.closePath();
        context.fillStyle = '#ff8000';// "rgba(255,0,0,0.2)";//
        context.fill();

//画内部，fill是填充,stroke是画线
//r可以设置圆环的宽度
        context.beginPath();
        context.arc(circle.x, circle.y, circle.r - 6, 0, Math.PI * 2, true);
        context.closePath();
        context.fillStyle = '#fff';
        context.fill();

// 与画实心圆的区别,fill是填充,stroke是画线
        context.beginPath();
        context.arc(circle.x, circle.y, circle.r - 8, 0, Math.PI * 2, true);
        context.closePath();

//写进度
        context.font = "bold 10px consolas";
        context.fillStyle = '#ff8000';
        context.textAlign = 'center';
        context.textBaseline = 'middle';
        context.moveTo(circle.x, circle.y);
        context.fillText(process + "%", circle.x, circle.y);
    }
    function getprocess() {
//获取网页可视页面的高度
        var pageHeight = document.documentElement.clientHeight;
        window.addEventListener('resize', function () {
            pageHeight = document.documentElement.clientHeight;
        }, false);
        window.addEventListener("scroll", function () {
//获取滚动条据顶部的距离
            var currentHeight = document.documentElement.scrollTop || document.body.scrollTop;
//获取整个网站页面的高度
            var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
//将整体高度减去可视页面高度算出剩下内容的百分比，不这样的话，第一次滚动不是0%开始。输出的值只取整数
            g("process").innerHTML = parseInt(100 * currentHeight / (scrollHeight - pageHeight)) + "%";
            drawcircle();
        }, false);
    }
    function g(id) {
        return document.getElementById(id);
    }
</script>