canvas画出菱形进度条

Myth丶恋晨 2022-05-10 09:26 312阅读 0赞

效果图：

![70][]

代码：

<!DOCTYPE html>
    <html>
    <head> 
        <meta charset="utf-8"> 
        <title>canvas写的菱形进度条</title> 
    </head>
    <body>
    <style>
        .divCon{
            position: relative;
        }
        #myCanvas1{
            position: absolute;
            left: 0;
        }
        .contn{
            position: absolute;
            top:89px;
            left: 84px;
        }
    </style>
    <div class="divCon">
        <canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;"></canvas>
        <canvas id="myCanvas1" width="200" height="200" style="border:1px solid #d3d3d3;"></canvas>
        <div class="contn"><span>30</span>%</div>
    </div>
    
    <script>
    
        var c=document.getElementById("myCanvas");
        var c1=document.getElementById("myCanvas1");
        var ctx=c.getContext("2d");
        var ctx1=c1.getContext("2d");
        ctx.lineWidth = 1;
        ctx.strokeStyle='red';
        ctx.moveTo(100,0);
        ctx.lineTo(200,100);
        ctx.lineTo(100,200);
        ctx.lineTo(0,100);
        ctx.lineTo(100,0);
        ctx.stroke();
        ctx1.lineWidth = 3;
        ctx1.strokeStyle='green';
        ctx1.moveTo(100,0);
        ctx.lineTo(200,100);
        ctx1.stroke();
        var num=30;
        //先求总边长  ，总共100份，每边长25
        var totalNum=100*100+100*100;
        totalNum=Math.ceil(Math.sqrt(totalNum));//总边长
        var perNum=totalNum/25;
        //num%所占的长度
        var nal=perNum*num; //每一个格子占多少
        var poso=Math.sqrt((nal*nal)/2); //位置
        console.log(poso);
        ctx1.lineWidth = 3;
        ctx1.strokeStyle='green';
        if(num<=25){
            ctx1.moveTo(100,0);
            ctx1.lineTo(poso+100,poso);
            ctx1.stroke();
        }else if(num<=50){
            nal=perNum*(num-25); //每一个格子占多少
            poso=Math.sqrt((nal*nal)/2); //位置
            console.log(poso);
            ctx1.moveTo(100,0);
            ctx1.lineTo(200,100);
            ctx1.lineTo(200-poso,100+poso);
            ctx1.stroke();
        }else if(num<=75){
            nal=perNum*(num-50); //每一个格子占多少
            poso=Math.sqrt((nal*nal)/2); //位置
            console.log(poso);
            ctx1.moveTo(100,0);
            ctx1.lineTo(200,100);
            ctx1.lineTo(100,200);
            ctx1.lineTo(100-poso,200-poso);
            ctx1.stroke();
        }else if(num<=100){
            nal=perNum*(num-75); //每一个格子占多少
            poso=Math.sqrt((nal*nal)/2); //位置
            console.log(poso);
            ctx1.moveTo(100,0);
            ctx1.lineTo(200,100);
            ctx1.lineTo(100,200);
            ctx1.lineTo(0,100);
            ctx1.lineTo(poso,100-poso);
            ctx1.stroke();
        }
    
    </script>
    
    </body>
    </html>

[70]: /images/20220510/f4ed2409ce414893b15a31af24e0039b.png