canvas绘制动态加载圆形百分比

最新推荐文章于 2024-05-30 01:51:11 发布

原创最新推荐文章于 2024-05-30 01:51:11 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#canvas

html5 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个使用HTML5 Canvas和CSS3实现的技能加载动画效果。该动画通过JavaScript控制动态展示技能加载进度，并以百分比形式显示。文章包含了完整的代码示例，有助于读者理解和实现类似效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
            <canvas width="152" height="152" id="process"></canvas>
            <h4>CSS3</h4>
        </div>  
    </body>
    <script type="text/javascript">

    //  技能
    var c = document.getElementById("process");
    var ctx = c.getContext('2d');
    var centerX = c.width/2;   //Canvas中心点x轴坐标
    var centerY = c.height/2;  //Canvas中心点y轴坐标
    var rad = Math.PI*2/100; //将360度分成100份，那么每一份就是rad度
    var speed = 0.4;         //加载的快慢就靠它了
//  var sec = document.getElementById("section-5th");
//滚动条距离顶部高度 
//  window.onscroll = function(){
//          var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
//          if(sec.offsetTop < scrollTop + 100 && speed < 80){
//              animate();
//              
//          } 
//          
//      }
    animate();

    function animate(){
        window.requestAnimationFrame(function(){
            if(speed < 80 ){
                animate();
            }
        }); 
        ctx.clearRect(0, 0, c.width, c.height);
        speed += 0.4;
        drawCircle(ctx,speed);
    };


    function drawCircle(ctx,percent){
        //画白色的静态圆
        ctx.save();  
        ctx.strokeStyle = "#D8CCBE";  
        ctx.lineWidth = 12; 
        ctx.beginPath();
        ctx.arc(centerX, centerY, 68, 0, Math.PI*2, false);  
        ctx.stroke();     
        ctx.closePath(); 
        ctx.restore();


        //画进度环
        ctx.save();
        ctx.strokeStyle = "#E87E04";
        ctx.lineWidth = 12;
        ctx.beginPath();
        ctx.arc(centerX, centerY, 68, -Math.PI/2, -Math.PI/2 +percent*rad, false);
        ctx.stroke();     
        ctx.closePath();  
        ctx.restore();

        //百分比文字绘制
        ctx.save();
        ctx.fillStyle = "#474d5d";
        ctx.font = "bold 21px Arial";

        //绘制字体并指定位置
        ctx.fillText(percent.toFixed(0) + '%', centerX-20, centerY+10);
        ctx.restore();
    }


    </script>
</html>