canvas变色进度条

最新推荐文章于 2023-05-19 23:52:07 发布

原谅8943

最新推荐文章于 2023-05-19 23:52:07 发布

阅读量338

点赞数 1

分类专栏： css 文章标签： canvas 进度条变色加载

本文链接：https://blog.csdn.net/HY200043/article/details/88783457

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

canvas变色进度条

有bug呀

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas width="500" height="500"></canvas>
<script>
    var can=document.getElementsByTagName("canvas")[0];
    var ctx=can.getContext("2d");
    var w=can.width;
    var h=can.height;
    var k=-90;
    var dd=0;
    var arr=['orange','green','pink','purple','coral','blue','red'];
    ctx.lineWidth="40";
    ctx.lineCap="round";
    ctx.font="50px '楷体'";
    ctx.textBaseline="middle";
    ctx.textAlign="center";
    ctx.strokeStyle=arr[2];
    var timer = setInterval(round, 30);
    function round(){
        ctx.clearRect((w/2-100),(h/2-100),200,200);
        ctx.fillText(""+(k+90),w/2,h/2);
        if((k+90)>360){
            k=-90;
            ctx.strokeStyle=arr[dd%7];
            dd++;
            console.log(dd % 7);
        }
        ctx.beginPath();
        ctx.arc(w/2,h/2,200,-Math.PI/2,Math.PI/180*(k+=10));
        ctx.stroke();
    }
</script>
</body>
</html>