用 Canvas 画出浏览页面的进度

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

JavaScript 实现网页滚动进度


这次写的代码是将页面浏览的百分比展示到页面中,从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>

当然最后页面得够长,添加

<div style="height:10000px;"> </div>

发表评论

电子邮件地址不会被公开。 必填项已用*标注