本文介绍了如何在浏览器中绘制并标注已知参数的三角形，并提供了三种方法：canvas、svg 和 css。其中，canvas 和 svg 更适合绘制复杂的图形，而 css 则更适合简单的三角形绘制。 文章还提供了一个使用 canvas 的示例代码，展示了如何绘制三角形并标注其边长和角度。
浏览器三角形绘制与标注
在网页中绘制三角形并标注其几何属性，有多种技术方案可供选择。 以下将详细分析 Canvas、SVG 和 CSS 三种常用方法的优缺点及适用场景。
1. Canvas 绘图
Canvas 使用 JavaScript 提供了强大的二维绘图能力，可以绘制任意形状，并通过 JavaScript 代码进行精确的控制和标注。 它适合绘制复杂的图形和动画，但需要编写更多的代码。
2. SVG 矢量图形
SVG 是一种基于 XML 的矢量图形格式，具有缩放不变形、清晰度高等优点。 使用 SVG 绘制三角形，可以方便地通过属性设置形状和大小，并利用文本元素进行标注。 SVG 更适合需要高清晰度和可缩放性的应用场景。
3. CSS 样式
CSS 可以通过伪元素和边框技巧绘制简单的三角形，代码简洁，但对于复杂的图形和标注，显得力不从心。 CSS 方法仅适用于简单的三角形绘制，不适合复杂的图形或动画效果。
框架选择
对于简单的三角形绘制，无需使用任何框架。 但如果需要构建更复杂的图形应用或动画，则可以考虑使用一些 JavaScript 图形库，例如 p5.js 或 Three.js，它们可以简化开发过程并提供更多功能。
Canvas 示例代码详解
以下代码片段展示了如何使用 Canvas 绘制三角形并标注其边长和角度：
// 三角形顶点坐标
const A = { x: 50, y: 300 };
const B = { x: 250, y: 300 };
const C = { x: 150, y: 100 };
// 计算边长
const AB_length = Math.hypot(B.x - A.x, B.y - A.y);
const BC_length = Math.hypot(C.x - B.x, C.y - B.y);
const CA_length = Math.hypot(A.x - C.x, A.y - C.y);
// 计算角度 (使用余弦定理)
const angle_A = Math.acos((AB_length**2 + CA_length**2 - BC_length**2) / (2 * AB_length * CA_length));
const angle_B = Math.acos((BC_length**2 + AB_length**2 - CA_length**2) / (2 * BC_length * AB_length));
const angle_C = Math.acos((CA_length**2 + BC_length**2 - AB_length**2) / (2 * CA_length * BC_length));
// 获取 Canvas 上下文
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 400;
document.body.appendChild(canvas);
// 绘制三角形
ctx.beginPath();
ctx.moveTo(A.x, A.y);
ctx.lineTo(B.x, B.y);
ctx.lineTo(C.x, C.y);
ctx.closePath();
ctx.strokeStyle = 'black';
ctx.stroke();
// 标注边长和角度
ctx.font = "14px Arial";
ctx.fillStyle = "black";
ctx.fillText(`AB = ${AB_length.toFixed(2)}`, (A.x + B.x) / 2, (A.y + B.y) / 2 + 20);
ctx.fillText(`BC = ${BC_length.toFixed(2)}`, (B.x + C.x) / 2, (B.y + C.y) / 2 + 20);
ctx.fillText(`CA = ${CA_length.toFixed(2)}`, (C.x + A.x) / 2, (C.y + A.y) / 2 + 20);
ctx.fillText(`∠A = ${ (angle_A * 180 / Math.PI).toFixed(2)}°`, A.x - 20, A.y - 20);
ctx.fillText(`∠B = ${ (angle_B * 180 / Math.PI).toFixed(2)}°`, B.x, B.y - 20);
ctx.fillText(`∠C = ${ (angle_C * 180 / Math.PI).toFixed(2)}°`, C.x, C.y + 30);
这段代码使用了 Math.hypot 函数简化了边长的计算，并对输出进行了更清晰的格式化。 选择合适的技术方案取决于具体的应用需求和复杂程度。
