Question

我想在圈子中显示我的网站统计信息。所以我用html分割创建了圆圈。我试图使用距离公式通过线距离连接所有圆，但是我无法获得线的角度，因此无法通过css和js进行相同的操作。

为此，我创建了一个画布，并且试图在画布中创建所有内容。您能帮我吗

这是我的代码

 
    $(document).ready(()=>{
        var lstColor=['#8da2dd','#4a2ac0','#005985','#0088b7','#a90c13','#2da90c','#a90c5e'];
        var canvas = document.getElementById('DemoCanvas');
        $(".circle").each((index,item)=>{
            $(item).css("top",Math.abs(rnd(0,300)))
            //$(item).css("margin-right",Math.abs(rnd(100,400)))
            var s=Math.abs(rnd(150,170))
            $(item).css("width",s)
            $(item).css("height",s)
            $(item).css("background-color",lstColor[index])
        })
        for(var i=0;i<$(".circle").length-2;i++){
            var context = canvas.getContext('2d');
            var beginCircle=$(".circle")[i];
            var endCircle=$(".circle")[i+1];
            var x1=Math.abs($(beginCircle).offset().left+jQuery(beginCircle).width()/2)
            var y1=Math.abs($(beginCircle).offset().top+jQuery(beginCircle).height()/2)
            var x2=Math.abs($(endCircle).offset().left+jQuery(beginCircle).width()/2)
            var y2=Math.abs($(endCircle).offset().top+jQuery(endCircle).height()/2)
            
            context.beginPath(); 
            // Staring point (10,45)
            context.moveTo(x1,y1);
            // End point (180,47)
            context.lineTo(x2,y2);
            // Make the line visible
            context.stroke();
        }
    })
    function rnd(min,max)
    {
        return Math.floor(Math.random()*(max-min+1)+min);
    }

.stats{
  clear:both;
  position:relative;
}
.circle{
  border-radius:50%;
  float:left;
  margin-left:10px;
  display:inline-block;
  position:relative;
  margin-left:100px;
}
#DemoCanvas{
    position: absolute;
    width: 100%;
    height: 500px;
}

<div class="stats">
        <canvas id="DemoCanvas" width="100%"></canvas> 
            <div class="circle circle-1"></div>            
            <div class="circle circle-2"></div>
            <div class="circle circle-3"></div>
            <div class="circle circle-4"></div>
            <div class="circle circle-5"></div>
            <div class="circle circle-6"></div>
            <div class="circle circle-7"></div>
        </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

请帮助

Answer 1

您可能想看一下canvas arc函数：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc

在画布中用圆圈连接线条

1 个答案: