canvas实现进度条_canvas 进度条

作者：繁依Fanyi0 | 2024-03-17 05:33:20

踩

canvas 进度条


<!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>

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/254305