纯Javascript绘制三角形，定位斜边_Javascript_Html_Css_Geometry_Drawing

纯Javascript绘制三角形，定位斜边

javascript html css geometry

纯Javascript绘制三角形，定位斜边,javascript,html,css,geometry,drawing,Javascript,Html,Css,Geometry,Drawing,我有3个x，y点，我正试图用它们来画一个右平移。所以我在计算边长之后，计算三角形的角度。在得到斜边的长度后，我想旋转斜边，使它完成三角形。出于某种原因，我的斜边有点错位，即使它旋转了适当的角度。这是我的代码和一个JSFIDLE window.onload=函数（）{ //三角帆(1,1100,1100100);；拉丝三角（1,1100,1,1100）； } 函数绘图三角形（x1，y1，x2，y2，x3，y3）{ //a边的长度是点1和点2的x（水平）轴之间的差。 var a=数学绝对值（x

我有3个x，y点，我正试图用它们来画一个右平移。所以我在计算边长之后，计算三角形的角度。在得到斜边的长度后，我想旋转斜边，使它完成三角形。出于某种原因，我的斜边有点错位，即使它旋转了适当的角度。这是我的代码和一个JSFIDLE


window.onload=函数（）{
//三角帆(1,1100,1100100);；
拉丝三角（1,1100,1,1100）；
}
函数绘图三角形（x1，y1，x2，y2，x3，y3）{
//a边的长度是点1和点2的x（水平）轴之间的差。
var a=数学绝对值（x1-x2）；
//b侧的长度是点2和点3的y（真轴）之间的差值
var b=数学绝对值（y2-y3）；
//也要求最后一边c的长度，我们必须使用毕达哥拉斯定理。
//c*c=a*a+b*b
//求a和b的平方，将结果相加，然后求出结果的平方根。
var c=Math.sqrt（（a*a）+（b*b））；
//我们必须用余弦规则来解三角形的3个角。
//c^2=a^2+b^2-c^2
变量A=（Math.acos（（（c*c）+（b*b）-（A*A））/（2*c*b））*（180/Math.PI）；
VarB=（Math.acos（（（c*c）+（a*a）-（B*B））/（2*a*c））*（180/Math.PI）；
var C=（Math.acos（（（a*a）+（b*b）-（C*C））/（2*a*b））*（180/Math.PI）；
//在点x1、y1和x2、y2之间添加A面div
var div=document.createElement（'div'）；
div.style.height='1px'；
div.style.width=a+‘px’；
div.style.backgroundColor='黑色'；
div.style.position=“绝对”；
div.style.left=x1；
div.style.top=y1；
文件.正文.附件（div）；
//在点x2、y2和x3、y3之间添加B侧div
div=document.createElement（'div'）；
div.style.height=b+“px”；
div.style.width=“1px”；
div.style.backgroundColor='黑色'；
div.style.position=“绝对”；
div.style.left=x2；
div.style.top=y2；
文件.正文.附件（div）；
div=document.createElement（'div'）；
div.style.height=“1px”；
div.style.width=c+“px”；
div.style.backgroundColor='黑色'；
div.style.position=“绝对”；
div.style.left=x3；
div.style.top=y3；
div.style.transform=“旋转（45度）”；
文件.正文.附件（div）；
}

因此@epascarello评论说顶部和左侧没有被考虑在内，所以首先要添加 “px”到那里的值，这打破了三角形，尽管在下面的示例中，我重新构造了顶部和左侧的设置，前两行来自同一点（x1-y1），最后一行来自第2行（x2-y2）的末端。要获得正确的角度，请将其旋转到135度，并将变换原点设置为0px 0px，以便它随后旋转到正确的位置

说了所有这些之后，您将发现使用canvas之类的工具可以获得更一致的结果

编辑实际上刚意识到三角形是错误的，因为最后一个点是100100。（试图让它看起来像你小提琴上的那个，忽略了点在说什么，更新了下面的示例，使每一行使用正确的点，并将最后一行旋转到225度）

window.onload=function（）{
drawTriangle（1,1100,1100,100）；
}
函数绘图三角形（x1，y1，x2，y2，x3，y3）{
//a边的长度是点1和点2的x（水平）轴之间的差。
var a=数学绝对值（x1-x2）；
//b侧的长度是点2和点3的y（真轴）之间的差值
var b=数学绝对值（y2-y3）；
//也要求最后一边c的长度，我们必须使用毕达哥拉斯定理。
//c*c=a*a+b*b
//求a和b的平方，将结果相加，然后求出结果的平方根。
var c=Math.sqrt（（a*a）+（b*b））；
//我们必须用余弦规则来解三角形的3个角。
//c^2=a^2+b^2-c^2
变量A=（Math.acos（（（c*c）+（b*b）-（A*A））/（2*c*b））*（180/Math.PI）；
VarB=（Math.acos（（（c*c）+（a*a）-（B*B））/（2*a*c））*（180/Math.PI）；
var C=（Math.acos（（（a*a）+（b*b）-（C*C））/（2*a*b））*（180/Math.PI）；
//加上a面。
var div=document.createElement（'div'）；
div.style.height='1px'；
div.style.width=a+‘px’；
div.style.backgroundColor='黑色'；
div.style.position=“绝对”；
div.style.left=x1+“px”；
div.style.top=y1+“px”；
文件.正文.附件（div）；
//加上b面。
div=document.createElement（'div'）；
div.style.height=b+“px”；
div.style.width=“1px”；
div.style.backgroundColor='黑色'；
div.style.position=“绝对”；
div.style.left=x2+“px”；
div.style.top=y2+“px”；
文件.正文.附件（div）；
//加上c面。
div=document.createElement（'div'）；
div.style.height=“1px”；
div.style.width=c+“px”；
div.style.backgroundColor='黑色'；
div.style.position=“绝对”；
div.style.left=x3+“px”；
div.style.top=y3+“px”；
div.style.transform=“旋转（225度）”；
div.style.transformOrigin=“0px 0px”；
文件.正文.附件（div）；
}

这里有一种方法可以使用

DIV

s和

transform rotate（）

创建任何类型的三角形：

功能绘制线（p1、p2、笔划、颜色）{
var dx=p2[0]-p1[0]，//水平距离
dy=p2[1]-p1[1]，//垂直距离
角度=Math.atan2（dy，dx）*（180/Math.PI），//与X轴相关的角度
length=Math.sqrt（dx*dx+dy*dy），//行长度
div=document.createElement（'div'）；
div.style.position=“绝对”；
div.style.left=p1[0]+'px'；//使用
div.style.top=p1[1]-笔划/2+'px'；//线宽校正
div.style.width=length+'px'；//宽度作为行长度
div.style.height=stroke+'px'；//高度作为线宽
div.style.background=颜色；
div.style.transformOrigin='0%50%'；//将原点设置为线宽的50%
div.style.transform='旋转（'+角度+'度）'；
文件.正文.附件（div）；
}
函数绘制三角形（P1、P2、P3、，
<html>
<head>
<script>

window.onload = function() {
//drawTriangle(1,1,100,1,100,100);
drawTriangle(1,1,100,1,1,100);
}


function drawTriangle(x1, y1, x2, y2, x3, y3) {

//The length of side a is the difference between point 1 and point 2's x (horizonal) axis.
var a = Math.abs(x1 - x2);

//The length of side b is the difference between point 2 and point 3's y (veritcal axis)
var b = Math.abs(y2 - y3);

//Too find the length of the last side c, we must use the pythagorean theorem.
//c*c=a*a+b*b
//square side a and b, and add the result.  Then find the square root of the result.
var c = Math.sqrt(((a*a) + (b*b)));

//We must use the Cosine rule to solve the triangles 3 angles.
//c^2 = a^2 + b^2 - c^2 

var A = (Math.acos(((c*c)+(b*b)-(a*a))/(2*c*b)))*(180/Math.PI);
var B = (Math.acos(((c*c)+(a*a)-(b*b))/(2*a*c)))*(180/Math.PI); 
var C = (Math.acos(((a*a)+(b*b)-(c*c))/(2*a*b)))*(180/Math.PI);


//Add side A div between points x1,y1, and x2,y2
var div = document.createElement('div');
div.style.height = '1px';
div.style.width = a + 'px';
div.style.backgroundColor = 'black';
div.style.position = "absolute";
div.style.left = x1;
div.style.top = y1;
document.body.appendChild(div);

//Add side B div between points x2,y2 and x3,y3
div = document.createElement('div');
div.style.height = b + "px";
div.style.width = "1px";
div.style.backgroundColor = 'black';
div.style.position = "absolute";
div.style.left = x2;
div.style.top = y2;
document.body.appendChild(div);

div = document.createElement('div');
div.style.height = "1px";
div.style.width = c + "px";
div.style.backgroundColor = 'black';
div.style.position = "absolute";
div.style.left = x3;
div.style.top = y3;

div.style.transform = "rotate(45deg)";

document.body.appendChild(div);

}

</script>
</head>
<body>
</body>
</html>