3个技巧搞定钝角三角形图片，新手避坑指南
面试被问原理答不上来？别慌，这正是很多转行前端的朋友踩过的坑。
我刚转岗那会儿，连个简单的几何图形渲染都搞不定，面试官一句“怎么判断并绘制钝角三角形”，我脑子直接宕机。今天这篇【新手避坑】指南，手把手教你用代码搞定【钝角三角形图片】，从判断逻辑到Canvas绘制，全部拆解。
概念速懂：什么是钝角三角形
钝角三角形就是有一个角大于90度的三角形。在几何学里，三个角分别是锐角、直角、钝角。只要有一个角是钝角，整个三角形就是钝角三角形。
这个概念很简单，但难点在于如何在代码里快速判断。
数学原理很直接：设三角形三边为a、b、c，如果满足 a² + b² < c²（假设c是最长边），那这个三角形就是钝角三角形。这是勾股定理的逆定理延伸。
但前端开发场景下，我们更关心的是坐标判断。给定三个点(x1,y1)、(x2,y2)、(x3,y3)，怎么快速算出角度？
这里有个常见误区：很多新手会去算每个角，然后判断哪个大于90度。其实没必要，只要判断最长边对应的角即可。
掘金技术社区有位大牛总结过：“几何问题优先用向量点积，别硬算角度。” 这句话点醒了很多人。
向量点积公式：A·B = |A||B|cosθ。如果点积为负，说明夹角大于90度。这个方法比算角度快得多，精度也更高。
环境准备：你需要什么
不需要复杂的环境，浏览器原生Canvas API就够用了。
硬件要求：任何能跑浏览器的电脑都行。
软件要求：
- Chrome/Firefox/Safari/Edge（推荐Chrome，调试方便）
- VS Code（代码编辑器，推荐装Live Server插件）
开发工具：
- 浏览器控制台（Console）：调试用
- Canvas调试工具：Chrome DevTools里的Canvas面板，可以查看绘制状态
前置知识：
- 基础HTML/CSS
- JavaScript基本语法（变量、函数、数组）
- 简单的三角函数（sin、cos、sqrt）
如果你是零基础，建议先跑通下面的Hello World例子，确认环境没问题再往下走。
<!DOCTYPE html>
<html>
<head><title>Canvas测试</title>
</head>
<body><canvas id="myCanvas" width="400" height="400"></canvas><script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');ctx.fillStyle = 'red';ctx.fillRect(10, 10, 100, 100);</script>
</body>
</html>
打开浏览器，看到红色方块，说明环境OK。
核心语法：判断与绘制的关键
1. 判断钝角三角形
核心思路：计算三边长度，找最长边，用余弦定理判断对应角是否大于90度。
function isObtuseTriangle(p1, p2, p3) {// 计算三边长度的平方（避免开方，提高效率）const ab2 = (p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2;const bc2 = (p2.x - p3.x) ** 2 + (p2.y - p3.y) ** 2;const ca2 = (p3.x - p1.x) ** 2 + (p3.y - p1.y) ** 2;// 找最长边对应的平方值const sides = [ab2, bc2, ca2];const maxSide = Math.max(...sides);// 另外两边的平方和const otherSidesSum = ab2 + bc2 + ca2 - maxSide;// 如果最长边的平方 > 另外两边平方和，则为钝角三角形return maxSide > otherSidesSum;
}
关键点：
- 用平方值比较，避免Math.sqrt()的性能开销
- 不需要算具体角度，只比较平方和
- 这个方法时间复杂度O(1)，适合大量数据判断
2. Canvas绘制三角形
function drawTriangle(ctx, p1, p2, p3, color) {ctx.beginPath();ctx.moveTo(p1.x, p1.y);ctx.lineTo(p2.x, p2.y);ctx.lineTo(p3.x, p3.y);ctx.closePath();ctx.fillStyle = color;ctx.fill();// 加个边框，让图形更清晰ctx.strokeStyle = 'black';ctx.lineWidth = 2;ctx.stroke();
}
注意事项：
closePath()很重要，否则三角形不会闭合- 颜色可以用十六进制、rgb()、hsl()
lineWidth设置边框粗细
完整代码示例：从判断到展示
下面是一个完整的可运行示例，包含随机生成三角形、判断类型、绘制展示。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>钝角三角形判断与绘制</title><style>body {display: flex;flex-direction: column;align-items: center;font-family: Arial, sans-serif;}canvas {border: 1px solid #ccc;margin: 20px 0;}.info {font-size: 18px;margin: 10px;}button {padding: 10px 20px;font-size: 16px;cursor: pointer;}</style>
</head>
<body><h2>钝角三角形判断工具</h2><canvas id="canvas" width="600" height="400"></canvas><div class="info" id="result"></div><button onclick="generateTriangle()">生成新三角形</button><script>const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');const resultDiv = document.getElementById('result');// 生成随机点function randomPoint() {return {x: Math.random() * 500 + 50,y: Math.random() * 300 + 50};}// 判断钝角三角形function isObtuseTriangle(p1, p2, p3) {const ab2 = (p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2;const bc2 = (p2.x - p3.x) ** 2 + (p2.y - p3.y) ** 2;const ca2 = (p3.x - p1.x) ** 2 + (p3.y - p1.y) ** 2;const sides = [ab2, bc2, ca2];const maxSide = Math.max(...sides);const otherSidesSum = ab2 + bc2 + ca2 - maxSide;return maxSide > otherSidesSum;}// 绘制三角形function drawTriangle(ctx, p1, p2, p3, color) {ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.beginPath();ctx.moveTo(p1.x, p1.y);ctx.lineTo(p2.x, p2.y);ctx.lineTo(p3.x, p3.y);ctx.closePath();ctx.fillStyle = color;ctx.fill();ctx.strokeStyle = 'black';ctx.lineWidth = 2;ctx.stroke();// 标注顶点ctx.fillStyle = 'black';ctx.font = '14px Arial';ctx.fillText(`A(${p1.x.toFixed(0)},${p1.y.toFixed(0)})`, p1.x - 20, p1.y - 10);ctx.fillText(`B(${p2.x.toFixed(0)},${p2.y.toFixed(0)})`, p2.x - 20, p2.y + 20);ctx.fillText(`C(${p3.x.toFixed(0)},${p3.y.toFixed(0)})`, p3.x - 20, p3.y - 10);}// 主函数function generateTriangle() {const p1 = randomPoint();const p2 = randomPoint();const p3 = randomPoint();const isObtuse = isObtuseTriangle(p1, p2, p3);// 钝角三角形用红色，其他用绿色const color = isObtuse ? '#ff6b6b' : '#51cf66';drawTriangle(ctx, p1, p2, p3, color);resultDiv.innerHTML = `<strong>类型：</strong>${isObtuse ? '钝角三角形' : '非钝角三角形'}<br><strong>顶点A：</strong>(${p1.x.toFixed(1)}, ${p1.y.toFixed(1)})<br><strong>顶点B：</strong>(${p2.x.toFixed(1)}, ${p2.y.toFixed(1)})<br><strong>顶点C：</strong>(${p3.x.toFixed(1)}, ${p3.y.toFixed(1)})`;}// 初始生成generateTriangle();</script>
</body>
</html>
运行效果：
- 点击按钮，随机生成三个点
- 自动判断是否为钝角三角形
- 钝角三角形显示红色，其他显示绿色
- 显示顶点坐标和判断结果
代码亮点：
- 随机点生成，避免边界情况
- 颜色区分，直观展示结果
- 顶点标注，方便调试
- 一键生成，方便测试
常见报错：这些坑你必须知道
1. 精度问题
浮点数比较时，maxSide > otherSidesSum 可能因为精度问题出错。
解决方案：加一个极小的容差值。
const EPSILON = 1e-9;
return maxSide > otherSidesSum + EPSILON;
2. 共线点问题
如果三个点共线，构不成三角形，但代码可能误判。
解决方案：先判断是否共线。
function areCollinear(p1, p2, p3) {const area = (p2.x - p1.x) * (p3.y - p1.y) - (p2.y - p1.y) * (p3.x - p1.x);return Math.abs(area) < 1e-9;
}// 在判断前先检查
if (areCollinear(p1, p2, p3)) {return false; // 不是三角形
}
3. Canvas未初始化
忘记获取context，或者canvas尺寸不对。
解决方案：
- 确保在DOM加载完成后执行
- 检查canvas宽高是否设置
window.onload = function() {const canvas = document.getElementById('canvas');if (!canvas) {console.error('Canvas元素未找到');return;}// 后续代码
};
4. 性能问题
大量三角形判断时，Math.max(...sides) 展开数组可能卡顿。
解决方案：手动比较，避免展开。
let maxSide = ab2;
if (bc2 > maxSide) maxSide = bc2;
if (ca2 > maxSide) maxSide = ca2;
5. 坐标系混淆
Canvas的y轴向下，数学坐标系y轴向上，容易搞混。
解决方案：统一用Canvas坐标系，不要转换。如果必须转换，加注释说明。
小结：记住这三点
- 判断用平方比较，别算角度，速度快精度高
- 加容差处理，浮点数比较必须考虑精度
- 先判断共线，避免无效计算
这个知识点看似简单，但面试常问，实际开发也常用。比如地图应用里的区域判断、游戏里的碰撞检测、数据可视化里的图形渲染，都离不开基础几何计算。
面试加分项：
- 能说出余弦定理的原理
- 能解释为什么用平方比较
- 能提到精度问题和共线处理
- 能现场写出代码
实战建议：
- 把代码存到本地，反复运行测试
- 尝试修改随机点范围，观察不同情况
- 加个输入框，手动输入三个点测试
- 记录每次判断结果，统计钝角三角形比例
这个知识点你面试被问过吗？留言说说
