使用 canvas 画饼图动画 0%到100%

2021-8-30 Jon js+jquery+ajax

使用 canvas 画饼图动画 0%到100%

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>canvas 画饼图动画 0到100</title>
        <style>
            body {
                margin: 0;
                overflow: hidden
            }
            #mycans {
                width: 100px;
                height: 100px;
                border: 1px solid #ddd;
                margin: 100px auto;
                display: block;
            }
        </style>
    </head>
    <body>
        <canvas id="mycans"></canvas>
        
        <script>
            // 抓取元素
            var mycans =document.querySelector('#mycans')
            // 设置画布的宽度和高度
            mycans.width =200;
            mycans.height =200;
            // 调用getContext(),返回给我们一个对象,这个对象里提供了若干个方法,供我们去绘制图形
            var ctx = mycans.getContext('2d');
            console.log(ctx);
            let value = 0;
            let timer = setInterval(()=>{
                value += 0.005;
                startDraw(value);
                if(value>=1) {
                    clearInterval(timer);
                }
            }, 30)
            function startDraw(value) {
                // 开始绘制路径  画画
                ctx.beginPath();
                //  准备要使用的颜色
                ctx.fillStyle ='pink';
                // 设置当前线条的宽度
                ctx,lineWidth =50;
                // 画画 ----逆时针绘制300度的扇形
                // 从圆心到弧线起点
                // 开始绘制路径
                ctx.moveTo(100,100);
                // 圆心的坐标(100,100)
                ctx.arc(100, 100, 100, -0.5*Math.PI, (value*2-0.5)*Math.PI, false);
                // 再到终点,再闭合 (结束绘制路径)
                ctx.fill();
                ctx.closePath();
            }
        </script>
    </body>
</html>

标签: canvas 饼图

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

评论:

xgAKhHdJjSz
2022-09-11 17:35
AYlvQUftgkGDIKNM
xBGANqrwlkW
2022-08-31 07:46
WuEnBViTvmeQf

发表评论:

皖ICP备15010162号-1 ©2015-2022 知向前端
qq:1614245331 邮箱:13515678147@163.com Powered by emlog sitemap