canvas加载进度条

最新推荐文章于 2024-07-09 12:45:23 发布

原谅8943

最新推荐文章于 2024-07-09 12:45:23 发布

阅读量394

点赞数 2

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

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

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

canvas加载进度条

效果预览
代码:

<!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 star=-90;
    var end=-90;
    var count=60;
    var length=100;

    ctx.lineWidth="30";
    ctx.lineCap="round";
    ctx.font="30px '楷体'";
    ctx.textAlign="center";
    ctx.textBaseline="middle";
    ctx.strokeStyle="#ccc";
    ctx.arc(w/2,h/2,(w/2-length),-Math.PI/2,Math.PI/2*3);
    ctx.stroke();
    var timer=setInterval(max,20);

    function max(){
        ctx.strokeStyle="pink";
        ctx.clearRect((w/2-90),(h/2-90),180,180);
        ctx.fillText((end+90)+"/360",w/2,h/2,200,200);
        ctx.beginPath();
        ctx.arc(w/2,h/2,(w/2-length),Math.PI/180*star,Math.PI/180*(end++));
        ctx.stroke();
        if(end>270){
            end=-90;
            ctx.clearRect((w/2-90),(h/2-90),180,180);
            ctx.fillText("加载完成",w/2,h/2,200,200);
            clearInterval(timer);
        }

    }
</script>
</body>
</html>

原谅8943

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
canvas加载进度条

**canvas加载进度条**代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><canvas width="500"...
复制链接

扫一扫