canvas画出菱形进度条

效果图：
代码：

<!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>
canvas画出菱形进度条

猜你喜欢
