canvas实现进度条

xpmhhh

已于 2023-07-20 23:45:08 修改

阅读量308

点赞数

文章标签： javascript 前端开发语言

于 2023-07-19 23:25:54 首次发布

本文链接：https://blog.csdn.net/xpmhhh/article/details/131819994

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas_task_xiapeimin</title>
</head>
<body>
    <canvas id="canvas" height="600" width="600" style="background: lightgray;"></canvas>
</body>
<script>
    var canvas = document.querySelector('#canvas');
    var context = canvas.getContext("2d");

    setDraw(30);
    
    function setDraw(speed){
        var i = 0;
        var timer = setInterval(function(){
            context.clearRect(0,0,canvas.width,canvas.height);
            draw(i);
            if(i==100) clearInterval(timer);
            i++;
        },speed);
    }

    function draw(i){
        // 外层圆
        context.beginPath();
        context.arc(300,300,110,0,Math.PI*2);
        context.lineWidth = 1;
        context.strokeStyle = "grey";
        context.stroke();
        // 中间圆
        context.beginPath();
        context.arc(300,300,100,Math.PI*1.5,Math.PI*(1.5+i*0.02));
        context.lineWidth = 10;
        context.strokeStyle = "blue";
        context.stroke();
        // 内层圆
        context.beginPath();
        context.arc(300,300,90,0,Math.PI*2);
        context.lineWidth = 1;
        context.strokeStyle = "grey";
        context.stroke();
        context.fillStyle = "white";
        context.fill();
        // 进度显示
        context.beginPath();
        context.textBaseline = "middle";
        context.textAlign = "center";
        context.font = "15px Arial";
        context.fillStyle = "black";
        context.fillText("进度："+i+"%",300,300);
    }
</script>
</html>