如何在JS中基于三边长度绘制三角形？含输入按钮交互实现

嘿，这个问题我刚好有思路！你需要的是根据三边长度计算出三角形的顶点坐标，然后再用Canvas的路径API来绘制，而不是直接用坐标点连线。下面给你一个完整的可运行方案：

1. 先搭建HTML结构 #

需要三个输入框用于输入三边长度，一个触发绘制的按钮，还有一个Canvas画布：

<div>
  <label>边A长度: <input type="number" id="sideA" min="1" value="30"></label>
  <label>边B长度: <input type="number" id="sideB" min="1" value="40"></label>
  <label>边C长度: <input type="number" id="sideC" min="1" value="50"></label>
  <button onclick="drawTriangle()">绘制三角形</button>
</div>
<canvas id="triangleCanvas" width="400" height="300" style="border:1px solid #ccc;"></canvas>

2. 核心JavaScript逻辑 #

步骤分解：

• 先获取输入的三边长度，做合法性校验（必须满足三角形三边关系：任意两边之和大于第三边）
• 根据三边长度计算三个顶点的坐标
• 用Canvas API绘制路径

完整JS代码：

function drawTriangle() {
  // 获取输入值并转为数字
  const sideA = parseFloat(document.getElementById('sideA').value);
  const sideB = parseFloat(document.getElementById('sideB').value);
  const sideC = parseFloat(document.getElementById('sideC').value);
  
  // 三角形合法性校验
  if (!isValidTriangle(sideA, sideB, sideC)) {
    alert('输入的三边无法构成三角形！请确保任意两边之和大于第三边');
    return;
  }

  const canvas = document.getElementById('triangleCanvas');
  const ctx = canvas.getContext('2d');
  
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 计算三个顶点坐标（把第一个点放在画布中心偏移位置，避免贴边）
  const offsetX = 100;
  const offsetY = 150;
  
  // 顶点1: (offsetX, offsetY)
  const point1 = { x: offsetX, y: offsetY };
  // 顶点2: 放在顶点1的右侧，距离为sideA
  const point2 = { x: offsetX + sideA, y: offsetY };
  // 顶点3: 用余弦定理计算坐标
  // 先计算顶点1处的夹角余弦值
  const cosAngle = (sideA**2 + sideB**2 - sideC**2) / (2 * sideA * sideB);
  const sinAngle = Math.sqrt(1 - cosAngle**2);
  const point3 = {
    x: offsetX + sideB * cosAngle,
    y: offsetY - sideB * sinAngle // 减号是让三角形向上画，符合视觉习惯
  };

  // 绘制三角形路径
  ctx.beginPath();
  ctx.moveTo(point1.x, point1.y);
  ctx.lineTo(point2.x, point2.y);
  ctx.lineTo(point3.x, point3.y);
  ctx.closePath();
  
  // 设置样式并填充描边
  ctx.strokeStyle = '#2c3e50';
  ctx.lineWidth = 2;
  ctx.stroke();
  ctx.fillStyle = 'rgba(34, 167, 240, 0.2)';
  ctx.fill();
}

// 辅助函数：判断三边能否构成三角形
function isValidTriangle(a, b, c) {
  return a + b > c && a + c > b && b + c > a && a > 0 && b > 0 && c > 0;
}

关键逻辑解释 #

• 坐标计算思路：把第一个顶点放在画布的偏移位置，第二个顶点沿x轴水平放置（距离为边A的长度），第三个顶点通过余弦定理计算出相对于第一个顶点的坐标，这样就能保证三边长度完全匹配输入值。
• 合法性校验：避免用户输入无效的三边长度（比如负数、或者无法构成三角形的组合），提升交互体验。
• 画布清空：每次绘制前清空画布，避免多次绘制重叠。

你可以直接把这段代码复制到HTML文件里运行，调整输入框的数值就能看到不同的三角形啦！

内容的提问来源于stack exchange，提问作者Павел Кушнеревич