最近有个小问题,已知三个点坐标,及其半径大小,求其三个圆相交的中心点。
利用各相交线段组成的三角形重心找出其中心点。
代码如下:
<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 &