js 三点定位中心点问题

这篇博客介绍了如何使用JavaScript解决已知三个圆的坐标和半径,找到它们相交中心点的问题。通过三角形重心法,实现了点击画布添加点、计算圆相交和画出相交线段,最后找出中心点的功能。涉及到的技术包括canvas画布、事件监听、坐标转换和几何计算。
摘要由CSDN通过智能技术生成

最近有个小问题,已知三个点坐标,及其半径大小,求其三个圆相交的中心点。

利用各相交线段组成的三角形重心找出其中心点。

代码如下:

<div class="" align="center"style="position: absolute; z-index: 1; top: 250px; left: 100px;">    
        <canvas id="myCanvas" style="border: 1px solid #000000;" height="300px" width="600px">    
        </canvas>
</div>
        
 <div class=""align="left"style="position: absolute; z-index: 1; top: 30px; left: 100px;">    
          A点的距离:<input type="text" id="input_a" value="" />  
          B点的距离:<input type="text" id="input_b" value="" />  

          C点的距离:<input type="text" id="input_c" value="" /> <br /><br />

          <button id="but_draw" οnclick="drawCircle()">画圆</button>

         <button id="but_clear" οnclick="clearC()">清除</button>

</div>

<script type="text/javascript">
    
        var points=[];
          function windowTocanvas(canvas, x, y) {
                var bbox = canvas.getBoundingClientRect();
                return {
                    x: x - bbox.left * (canvas.width / bbox.width),
                    y: y - bbox.top * (canvas.height / bbox.height)
                };

            }
         window.οnlοad=function(){
            var canvas=document.getElementById("myCanvas");
            var ctx = canvas.getContext('2d');
            canvas.οnclick=function(event){
            if(points.length>=3)
            {
                alert("只能画三个点坐标。");
                return;
            }
                        
            var loc=windowTocanvas(canvas,event.clientX,event.clientY);
                var x=parseInt(loc.x);
                var y=parseInt(loc.y);
            
                var pointName;
                if(points.length=="0")
                {
                    pointName="A";
                }
                else if(points.length=="1")
                {
                    pointName="B";
                }else
                {
                    pointName="C";
                }
                points.push({"id":pointName,"x":x,"y":y,"r":"0"});
            
                ctx.beginPath();//画实心圆
                ctx.arc(x,y,3,0,2*Math.PI,true);
                ctx.closePath();
                ctx.fillStyle="red";
                ctx.fill();
                //写字
                ctx.fillStyle &

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值