微信图片_20240418160325.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas</title>
<style>
body {
margin: 0;
}
canvas {
border: 1px solid black;
width: 50%;
height: 50%;
}
</style>
</head>
<body onload="draw()">
<canvas id="target"></canvas>
<script>
/**
* 获取切点
* @param c1 大圆
* @param c2 小圆
* @param r1 大圆半径
* @param r2 小圆半径
*/
function calcQieDian(c1, c2, r1, r2) {
//圆心之间的距离
let d = Math.sqrt(Math.pow(c1.x - c2.x, 2) + Math.pow(c1.y - c2.y, 2));
//外公切线与连心线夹角的角度
let theta = Math.acos((r1 - r2) / d);
let vc1c2 = { x: c2.x - c1.x, y: -c2.y + c1.y }; //屏幕坐标系与笛卡尔坐标系是y轴是反着的
let radC1C2 = Math.acos(vc1c2.x / Math.sqrt(Math.pow(vc1c2.x, 2) + Math.pow(vc1c2.y, 2)));
if (c2.y <= c1.y) {
//大圆上的切点
let p1 = { x: c1.x + Math.cos(theta + radC1C2) * r1, y: c1.y - Math.sin(theta + radC1C2) * r1 };
let p2 = { x: c1.x + Math.cos(theta - radC1C2) * r1, y: c1.y + Math.sin(theta - radC1C2) * r1 };
//小圆上的切点
let p3 = { x: c2.x + Math.cos(theta + radC1C2) * r2, y: c2.y - Math.sin(theta + radC1C2) * r2 };
let p4 = { x: c2.x + Math.cos(theta - radC1C2) * r2, y: c2.y + Math.sin(theta - radC1C2) * r2 };
return { p1: p1, p2: p2, p3: p3, p4: p4 };
} else {
radC1C2 = Math.PI - radC1C2;
//大圆上的切点
let p1 = { x: c1.x + Math.cos(Math.PI - theta - radC1C2) * r1, y: c1.y + Math.sin(Math.PI - theta - radC1C2) * r1 };
let p2 = { x: c1.x + Math.cos(Math.PI - (theta - radC1C2)) * r1, y: c1.y - Math.sin(Math.PI - (theta - radC1C2)) * r1 };
//小圆上的切点
let p3 = { x: c2.x + Math.cos(Math.PI - theta - radC1C2) * r2, y: c2.y + Math.sin(Math.PI - theta - radC1C2) * r2 };
let p4 = { x: c2.x + Math.cos(Math.PI - (theta - radC1C2)) * r2, y: c2.y - Math.sin(Math.PI - (theta - radC1C2)) * r2 };
return { p1: p1, p2: p2, p3: p3, p4: p4 };
}
}
function drawLine(ctx, pointStart, pointEnd) {
ctx.beginPath();
ctx.moveTo(pointStart.x, pointStart.y);
ctx.lineTo(pointEnd.x, pointEnd.y);
ctx.stroke();
}
function draw() {
var canvas = document.getElementById('target');
canvas.width = window.innerWidth
canvas.height = window.innerHeight > 600 ? window.innerHeight : 600
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
//
const pointA = { x: 600, y: 200, r: 100 }
const pointB = { x: 200, y: 260, r: 150 }
/* arc(x, y, 半经, 开始孤度, 结束孤度, 方向）*/
ctx.beginPath()
ctx.arc(
pointA.x, pointA.y, // 圆心位置
pointA.r, // 半径
0, // 起始角度
Math.PI * 4 / 2 // 结束角度 Math.PI 180deg
)
ctx.moveTo(pointA.x, pointA.y,) // 圆A 圆心
ctx.arc(
pointA.x, pointA.y, // 圆心位置
1, // 半径
0, // 起始角度
Math.PI * 4 / 2 // 结束角度 Math.PI 180deg
)
ctx.moveTo(350, 260)
ctx.arc(
pointB.x, pointB.y, // 圆心位置
pointB.r, // 半径
0, // 起始角度
Math.PI * 4 / 2 // 结束角度 Math.PI 180deg
)
ctx.moveTo(pointB.x, pointB.y,) // 圆B 圆心
ctx.arc(
pointB.x, pointB.y, // 圆心位置
1, // 半径
0, // 起始角度
Math.PI * 4 / 2 // 结束角度 Math.PI 180deg
)
ctx.lineWidth = 5 // 线宽
ctx.stroke() // 线路
let p = calcQieDian(
{ x: pointA.x, y: pointA.y },
{ x: pointB.x, y: pointB.y },
pointA.r, pointB.r
);
drawLine(ctx, p.p1, p.p3);
drawLine(ctx, p.p2, p.p4);
}
}
</script>
</body>
</html>
