js圆形进度条

Html

Css

window.onload = function() {
    var bplList = document.getElementsByTagName("li"); //获取死胖子列表
    for (let i = 0; i < bplList.length; i++) {
        var progress = Number(bplList[i].id); //li的id测试的进度数据
        bplCircle(bplList[i].childNodes[0], progress, "canvas" + i); //bplCircle (canvas, int); 
    }

//绘制20像素宽的运动外圈
    function blueCircle(n) {
        context.save();
        context.strokeStyle = "orange"; //设置描边样式
        context.lineWidth = 20; //设置线宽
        context.beginPath(); //路径开始
        context.arc(centerX, centerY, 100, -Math.PI / 2, -Math.PI / 2 + n * rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
        context.stroke(); //绘制
        context.closePath(); //路径结束
        context.restore();
    }
    //绘制白色外圈
    function whiteCircle() {
        context.save();
        context.beginPath();
        context.lineWidth = 20; //设置线宽
        context.strokeStyle = "#fff";
        context.arc(centerX, centerY, 100, 0, Math.PI * 2, false);
        context.stroke();
        context.closePath();
        context.restore();
    }
    //百分比文字绘制
    function text(n) {
        context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
        context.strokeStyle = "#fff"; //设置描边样式
        context.font = "40px Arial"; //设置字体大小和字体
        //绘制字体，并且指定位置
        context.strokeText(n.toFixed(0) + "%", centerX - 25, centerY + 10);
        context.stroke(); //执行绘制
        context.restore();
    }

/**
     * 
     * @param {Object} nowProgress  画到的进度
     * @param {Object} canvasDom   canvas元素
     */
    function spzCircle(nowProgress, canvasDom) {
        var canvas = canvasDom; //获取canvas元素
        context = canvas.getContext('2d'), //获取画图环境，指明为2d
            centerX = canvas.width / 2, //Canvas中心点x轴坐标
            centerY = canvas.height / 2, //Canvas中心点y轴坐标
            rad = Math.PI * 2 / 100; //将360度分成100份，那么每一份就是rad度
        context.clearRect(0, 0, canvas.width, canvas.height);
        whiteCircle();
        text(nowProgress);
        blueCircle(nowProgress);
    }

/**
     * 在循环里面调用
     * @param {Object} canvasDom  canvas元素
     * @param {Object} progress   进度
     */
    function bplCircle(canvasDom, progress, canvasInterval) {
        var nowProgress = 0;
        canvasInterval = setInterval(function() {
            if (nowProgress == progress) {
                clearInterval(canvasInterval);
            } else {
                nowProgress++;
                spzCircle(nowProgress, canvasDom);
            }
        }, 100);
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js圆形进度条



代码描述：canvas绘制圆形进度条

因为懒，用的id做进度（建议使用自定义属性）

1

最新

发表评论全部评论

暂时没有评论！

陌上千寻0

2018/1/9 19:29:10

这个可以哦！
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

calico

相关代码

js圆形进度条

最新