Dav*_*her 2 html javascript css geometry drawing
我有3 x,y点,我试图用来绘制一个正确的trangle.所以我在计算边长后计算三角形的角度.在我得到斜边的长度后,我想旋转斜边以便完成三角形.出于某种原因,即使旋转了适当的度数,我的斜边也有点偏离位置.这是我的代码和jsfiddle.
<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>
所以@epascarello评论顶部和左边没有被考虑在内,所以首先要将"px"添加到那里的值,这打破了三角形,尽管如此,在下面的示例中我重新构建了顶部和左边的设置因为,前两行形成相同的点(x1 y1),最后一行来自第2行的末尾(x2 y2).要获得正确的角度,请将其旋转至135度并将变换原点设置为0px 0px,然后将其旋转到正确的位置.
说完这一切之后,你会发现使用像canvas这样的东西会有更一致的结果.
编辑 实际上只是意识到三角形是错误的方式,因为最后一点是100,100.(试图让它看起来像你的小提琴,忽略点的意思,更新下面的例子,所以每行使用正确的点,并将最后一个旋转到225deg)
window.onload = function() {
drawTriangle(1, 1, 100, 1, 100, 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.
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 + "px";
div.style.top = y1 + "px";
document.body.appendChild(div);
//Add side b.
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 + "px";
div.style.top = y2 + "px";
document.body.appendChild(div);
//Add side c.
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 + "px";
div.style.top = y3 + "px";
div.style.transform = "rotate(225deg)";
div.style.transformOrigin = "0px 0px";
document.body.appendChild(div);
}| 归档时间： |
|
| 查看次数： |
1515 次 |
| 最近记录： |