<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>三角形内角和验证工具</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box;font-family: "Microsoft YaHei", sans-serif;}
  body{background:#f4f7fa;padding:20px;}
  .main{display:flex;gap:24px;max-width:1400px;margin:0 auto;}
  .left{flex:1;background:#fff;border-radius:12px;padding:24px;box-shadow:0 2px 10px rgba(0,0,0,0.08);}
  .right{width:520px;background:#fff;border-radius:12px;padding:24px;box-shadow:0 2px 10px rgba(0,0,0,0.08);}
  h1{text-align:center;color:#222;margin-bottom:20px;font-size:24px;}
  .canvas-box{position:relative;width:100%;height:500px;border:2px solid #4e88e6;border-radius:8px;background:#fafafa;overflow:hidden;}
  #canvas{width:100%;height:100%;display:block;}
  .info{display:flex;justify-content:space-around;margin:20px 0;padding:16px;background:#eef5ff;border-radius:8px;font-size:18px;font-weight:bold;}
  .sum-type{display:flex;gap:16px;margin-bottom:20px;}
  .sum-type>div{flex:1;text-align:center;padding:12px;border-radius:8px;font-size:18px;font-weight:bold;}
  .sum{background:#e8fff4;color:#10ac84;}
  .type{background:#f9f0ff;color:#8e44ad;}
  .btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:10px;}
  button{padding:10px 16px;border:none;border-radius:6px;color:#fff;font-size:15px;font-weight:bold;cursor:pointer;transition:0.2s;}
  button:hover{transform:translateY(-2px);}
  .btn-general{background:#4e88e6;}
  .btn-acute{background:#1dd1a1;}
  .btn-right{background:#ff9f43;}
  .btn-obtuse{background:#ff6b6b;}
  .btn-clear{background:#7f8c8d;}
  table{width:100%;border-collapse:collapse;margin-top:16px;font-size:14px;}
  th,td{padding:10px;text-align:center;border:1px solid #ddd;}
  th{background:#4e88e6;color:white;position:sticky;top:0;}
  tr:nth-child(even){background:#f8f9fa;}
  .count{text-align:center;margin-top:10px;font-weight:bold;color:#333;}
</style>
</head>
<body>

<div class="main">
  <div class="left">
    <h1>三角形内角和验证工具</h1>
    <div class="canvas-box">
      <canvas id="canvas"></canvas>
    </div>

    <div class="info">
      <div>∠A：<span id="a" style="color:#e74c3c">0°</span></div>
      <div>∠B：<span id="b" style="color:#e74c3c">0°</span></div>
      <div>∠C：<span id="c" style="color:#e74c3c">0°</span></div>
    </div>

    <div class="sum-type">
      <div class="sum">内角和：<span id="sum">180°</span></div>
      <div class="type">类型：<span id="type">三角形</span></div>
    </div>

    <div class="btns">
      <button class="btn-general" onclick="gen('general')">一般三角形</button>
      <button class="btn-acute" onclick="gen('acute')">锐角三角形</button>
      <button class="btn-right" onclick="gen('right')">直角三角形</button>
      <button class="btn-obtuse" onclick="gen('obtuse')">钝角三角形</button>
      <button class="btn-clear" onclick="clearRecords()">清空记录</button>
    </div>
  </div>

  <div class="right">
    <h2 style="text-align:center;margin-bottom:10px;">验证记录表</h2>
    <div class="count">总记录数：<span id="count">0</span></div>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>∠A</th>
          <th>∠B</th>
          <th>∠C</th>
          <th>内角和</th>
          <th>三角形类型</th>
        </tr>
      </thead>
      <tbody id="tableBody"></tbody>
    </table>
  </div>
</div>

<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let w, h;
let points = [];
let drag = null;
let records = [];

function resize() {
  const rect = canvas.parentElement.getBoundingClientRect();
  w = rect.width;
  h = rect.height;
  canvas.width = w;
  canvas.height = h;
}

function rand(a,b) { return Math.random()*(b-a)+a; }

function genGeneral() {
  points = [
    {x: rand(100,w-100), y: rand(100,h-100)},
    {x: rand(100,w-100), y: rand(100,h-100)},
    {x: rand(100,w-100), y: rand(100,h-100)}
  ];
}

function genAcute() {
  const cx = w/2, cy = h/2, r = Math.min(w,h)/3;
  points = [];
  for(let i=0;i<3;i++){
    let a = i*Math.PI*2/3 + rand(-0.25,0.25);
    points.push({x: cx + r*Math.cos(a), y: cy + r*Math.sin(a)});
  }
}

function genRight() {
  const cx=w/2, cy=h/2;
  points = [
    {x: cx-140, y: cy+100},
    {x: cx+140, y: cy+100},
    {x: cx-140, y: cy-80}
  ];
}

function genObtuse() {
  const cx=w/2, cy=h/2;
  points = [
    {x: cx-180, y: cy},
    {x: cx+180, y: cy},
    {x: cx, y: cy+40}
  ];
}

function gen(t) {
  if(t==='general') genGeneral();
  if(t==='acute') genAcute();
  if(t==='right') genRight();
  if(t==='obtuse') genObtuse();
  addRecord();
  draw();
}

function dist(p1,p2){
  return Math.hypot(p1.x-p2.x, p1.y-p2.y);
}

function getAngles() {
  const A=points[0],B=points[1],C=points[2];
  const a=dist(B,C), b=dist(A,C), c=dist(A,B);
  const Aa = Math.acos( Math.max(-1, Math.min(1, (b*b+c*c-a*a)/(2*b*c)) )) * 180/Math.PI;
  const Ab = Math.acos( Math.max(-1, Math.min(1, (a*a+c*c-b*b)/(2*a*c)) )) * 180/Math.PI;
  const Ac = Math.acos( Math.max(-1, Math.min(1, (a*a+b*b-c*c)/(2*a*b)) )) * 180/Math.PI;
  return [Aa,Ab,Ac];
}

function getType(ag) {
  if(ag.some(x=>x>90.1)) return "钝角三角形";
  if(ag.some(x=>Math.abs(x-90)<=0.1)) return "直角三角形";
  return "锐角三角形";
}

function draw() {
  ctx.clearRect(0,0,w,h);
  if(points.length<3) return;
  const ag = getAngles();
  const sum = ag[0]+ag[1]+ag[2];
  const type = getType(ag);

  document.getElementById('a').innerText = ag[0].toFixed(1)+'°';
  document.getElementById('b').innerText = ag[1].toFixed(1)+'°';
  document.getElementById('c').innerText = ag[2].toFixed(1)+'°';
  document.getElementById('sum').innerText = sum.toFixed(1)+'°';
  document.getElementById('type').innerText = type;

  ctx.beginPath();
  ctx.moveTo(points[0].x, points[0].y);
  ctx.lineTo(points[1].x, points[1].y);
  ctx.lineTo(points[2].x, points[2].y);
  ctx.closePath();
  ctx.strokeStyle='#4e88e6';
  ctx.lineWidth=3;
  ctx.stroke();
  ctx.fillStyle='rgba(78,136,230,0.1)';
  ctx.fill();

  points.forEach((p,i)=>{
    ctx.beginPath();
    ctx.arc(p.x,p.y,10,0,Math.PI*2);
    ctx.fillStyle='#ff4757';
    ctx.fill();
    ctx.strokeStyle='#fff';
    ctx.lineWidth=2;
    ctx.stroke();
    ctx.fillStyle='#222';
    ctx.font='16px bold sans-serif';
    ctx.textAlign='center';
    ctx.fillText(String.fromCharCode(65+i), p.x, p.y-16);
  });
}

function addRecord() {
  const ag = getAngles();
  const sum = ag[0]+ag[1]+ag[2];
  const type = getType(ag);
  records.push({
    a: ag[0].toFixed(1),
    b: ag[1].toFixed(1),
    c: ag[2].toFixed(1),
    sum: sum.toFixed(1),
    type: type
  });
  renderTable();
}

function renderTable() {
  const tb = document.getElementById('tableBody');
  const cnt = document.getElementById('count');
  tb.innerHTML = '';
  cnt.innerText = records.length;
  records.forEach((r,i)=>{
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td>${i+1}</td>
      <td>${r.a}°</td>
      <td>${r.b}°</td>
      <td>${r.c}°</td>
      <td>${r.sum}°</td>
      <td>${r.type}</td>
    `;
    tb.appendChild(tr);
  });
}

function clearRecords() {
  records = [];
  renderTable();
}

function getPos(e) {
  const r = canvas.getBoundingClientRect();
  return {
    x: e.clientX - r.left,
    y: e.clientY - r.top
  };
}

canvas.addEventListener('mousedown', e=>{
  const p = getPos(e);
  drag = points.find(pt=>dist(pt,p)<16);
});

canvas.addEventListener('mousemove', e=>{
  if(!drag) return;
  const p = getPos(e);
  drag.x = p.x;
  drag.y = p.y;
  draw();
});

canvas.addEventListener('mouseup', ()=>{
  if(drag){
    addRecord();
    drag = null;
  }
});
canvas.addEventListener('mouseleave', ()=>drag=null);

canvas.addEventListener('touchstart', e=>{
  e.preventDefault();
  const t = e.touches[0];
  const p = getPos(t);
  drag = points.find(pt=>dist(pt,p)<16);
});

canvas.addEventListener('touchmove', e=>{
  e.preventDefault();
  if(!drag) return;
  const t = e.touches[0];
  const p = getPos(t);
  drag.x = p.x;
  drag.y = p.y;
  draw();
});

canvas.addEventListener('touchend', ()=>{
  if(drag){
    addRecord();
    drag = null;
  }
});

window.addEventListener('resize', ()=>{ resize(); draw(); });

resize();
genGeneral();
addRecord();
draw();
</script>
</body>
</html>