绘制已知参数的三角形并标注角度和边长，用什么绘制比较方便？-灵析社区
Kapp啊$0920 如上图，需要在浏览器画一个三角形，并且标注各个角的角度、及各条边长，用什么画容易？css、canvas、svg？还是有什么框架可以方便实现？ 备注：三角形是已知各个边长和角度的
我买了30万的鞋子css中paint函数，cavans,svg都可以，需求不复杂，感觉没必要用框架
下面是AI给出的答案，可能要改造下才能用
Document
// 创建画布
var canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 400;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
// 定义三角形的三个顶点坐标
var A = { x: 50, y: 300 };
var B = { x: 250, y: 300 };
var C = { x: 150, y: 100 };
// 绘制三角形
ctx.beginPath();
ctx.moveTo(A.x, A.y);
ctx.lineTo(B.x, B.y);
ctx.lineTo(C.x, C.y);
ctx.closePath();
ctx.stroke();
// 计算三条边的长度
function distance(point1, point2) {
return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
}
var AB_length = distance(A, B);
var BC_length = distance(B, C);
var CA_length = distance(C, A);
// 计算三个角的角度（以弧度为单位）
function angle(point1, point2, point3) {
var a = distance(point2, point3);
var b = distance(point1, point3);
var c = distance(point1, point2);
return Math.acos((a * a + b * b - c * c) / (2 * a * b));
}
var angle_A = angle(B, A, C);
var angle_B = angle(C, B, A);
var angle_C = angle(A, C, B);
// 标注边长和角度
ctx.font = "14px Arial";
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);