圆环进度条

绘制背景圆环

// 绘制一帧
function draw(){
    // 清除画布
    ctx.clearRect(0,0,cvs.width, cvs.height);

    // 计算绘制参数
    var x = cvs.width/2; // 中心坐标
    var y = cvs.height/2; 
    ctx.lineWidth = 16; // 圆环的宽度
    ctx.lineCap = "round"; // 进度条两端的样式
    var r = Math.min(x, y) - ctx.lineWidth/2; // 圆的半径

    // 绘制背景圆环
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI*2);        
    ctx.strokeStyle = "purple";
    ctx.stroke();
}

绘制进度条

window.onload = function (){
    var cvs = document.getElementById("cvs");
    var ctx = cvs.getContext("2d");

    var target = 0.4; // 进度值

    // 绘制一帧
    function draw(){
        // 清除画布
        ctx.clearRect(0,0,cvs.width, cvs.height);

        // 计算绘制参数
        var x = cvs.width/2; // 中心坐标
        var y = cvs.height/2; 
        ctx.lineWidth = 16; // 圆环的宽度
        ctx.lineCap = "round"; // 进度条两端的样式
        var r = Math.min(x, y) - ctx.lineWidth/2; // 圆的半径

        // 绘制背景圆环
        // ...

        // 绘制进度条
        ctx.beginPath();
        var start = 0;
        var end = Math.PI*2*target;
        ctx.arc(x, y, r, start, end);
        ctx.strokeStyle = "purple";
        ctx.stroke();
    }
}

将开始点移动到12点位置

var start = Math.PI*3/2;
var end = Math.PI*2*target + start;

终点延长动效

window.onload = function (){
    var cvs = document.getElementById("cvs");
    var ctx = cvs.getContext("2d");

    var total = 13; // 用多少帧完成动画
    var progress = 0; // 当前是第多少帧
    var target = 0.4; // 目标进度值

    // 绘制一帧
    function draw(){
        if (progress > total) 
            return;

        // 清除画布
        ctx.clearRect(0,0,cvs.width, cvs.height);

        // 计算绘制参数
        var x = cvs.width/2; // 中心坐标
        var y = cvs.height/2; 
        ctx.lineWidth = 16; // 圆环的宽度
        ctx.lineCap = "round"; // 进度条两端的样式
        var r = Math.min(x, y) - ctx.lineWidth/2; // 圆的半径

        // 绘制背景圆环
        // ...

        // 绘制进度条
        ctx.beginPath();
        var start = Math.PI*3/2;
        var p = target*progress/total; // 进度值
        var end = Math.PI*2*p + start;
        ctx.arc(x, y, r, start, end);
        ctx.strokeStyle = "purple";
        ctx.stroke();

        progress++; // 绘制完一帧
    }

    setInterval(draw, 100); // 定时重绘
}

起点旋转动效

var start = Math.PI*3/2*progress/total;

绘制文字

// 绘制一帧
function draw(){
    // 绘制进度条
    // ...
    var p = target*progress/total;

    // 绘制文字
    var text = (p*100).toFixed(2)+"%"; // 计算进度对应的文字
    ctx.font = "25px Arial"; // 文字字体
    ctx.fillStyle = "orange"; // 文字颜色
    ctx.textAlign = "center"; // 文字水平居中
    ctx.textBaseline = "middle"; // 文字垂直居中
    // ctx.measureText(text).width; // 度量文字的宽度
    ctx.fillText(text, cvs.width/2, cvs.height/2);
}

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
        window.onload = function (){
            var cvs = document.getElementById("cvs");
            var ctx = cvs.getContext("2d");

            var total = 13; // 用多少帧完成动画
            var progress = 0; // 当前是第多少帧
            var target = 0.4; // 目标进度值

            // 绘制一帧
            function draw(){
                if (progress > total)
                    return;

                // 清除画布
                ctx.clearRect(0,0,cvs.width, cvs.height);

                // 计算绘制参数
                var x = cvs.width/2; // 中心坐标
                var y = cvs.height/2; 
                ctx.lineWidth = 16; // 圆环的宽度
                ctx.lineCap = "round"; // 进度条两端的样式
                var r = Math.min(x, y) - ctx.lineWidth/2; // 圆的半径

                // 绘制背景圆环
                ctx.beginPath();
                ctx.arc(x, y, r, 0, Math.PI*2);        
                ctx.strokeStyle = "#87CEEB";
                ctx.stroke();

                // 绘制进度条
                ctx.beginPath();
                var start = Math.PI*3/2*progress/total;
                var p = target*progress/total; // 进度值
                var end = Math.PI*2*p + start;
                ctx.arc(x, y, r, start, end);
                ctx.strokeStyle = "purple";
                ctx.stroke();

                // 绘制文字
                var text = (p*100).toFixed(2)+"%"; // 计算进度对应的文字
                ctx.font = "25px Arial"; // 文字字体
                ctx.fillStyle = "orange"; // 文字颜色
                ctx.textAlign = "center"; // 文字水平居中
                ctx.textBaseline = "middle"; // 文字垂直居中
//                ctx.measureText(text).width; // 度量文字的宽度
                ctx.fillText(text, cvs.width/2, cvs.height/2);

                progress++; // 绘制完一帧
            }

            setInterval(draw, 100); // 定时重绘
        }

        </script>
    </head>
    <body>
        <canvas id="cvs" width="200" height="200"></canvas>
    </body>
</html>

results matching ""

    No results matching ""