1
피타고라스의 정리를 사용하여 삼각형의 누락 된 부분을 계산할 수있는 프로그램을 만들고 싶었습니다. 또한 프로그램은 삼각형을 svg 또는 캔버스 (실제로는 중요하지 않음)로 확장해야합니다. 일부 삼각형 (예 : 3,4,5)에서는 작동하지만 일부는 길이가 길어지는 경우가 있습니다 (주로 a면). 누군가 이것을 고치는 방법을 알고 있습니까? 부디?
Code Pen피타고라스 삼각형 계산기
//Following three functions only post the side lengths
function findC(){
var a = document.getElementById("a1").value;
var b = document.getElementById("b1").value;
var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
document.getElementById("outputC").innerHTML="Side A= "+a+ ", Side B= "+b+ ", Side C= "+c;
}
function findB(){
var a = document.getElementById("a2").value;
var c = document.getElementById("c2").value;
var b = Math.sqrt(Math.pow(c, 2) - Math.pow(a, 2));
document.getElementById("outputB").innerHTML="Side A= "+a+ ", Side B= "+b+ ", Side C= "+c;
}
function findA(){
var b = document.getElementById("b3").value;
var c = document.getElementById("c3").value;
var a = Math.sqrt(Math.pow(c, 2) - Math.pow(b, 2));
document.getElementById("outputA").innerHTML="Side A= "+a+ ", Side B= "+b+ ", Side C= "+c;
}
//Following three functions draw the triangles
function drawSVGC() {
var a = document.getElementById("a1").value;
var b = document.getElementById("b1").value;
var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)); //Calculates sideC
//To make the drawings larger so that they are visible
if(a<20){
a = a*10;
}
if(b<20){
b = b*10;
}
if(c<20){
c = c*10;
}
\t \t var x3 = a;
var y3 = b;
var ox = 45 - (a/2);
var oy = 45 + (y3/2);
var points = [
[ox, oy].join(','),
[a + ox, oy].join(','),
[ox + x3, oy - y3].join(',')
].join(' ');
document.getElementById('triangleC').setAttribute('points', points);
}
var myBtn1 = document.getElementById('btn1');
myBtn1.addEventListener('click', function(event) {
drawSVGC();
});
function drawSVGB() {
var a = document.getElementById("a2").value;
var c = document.getElementById("c2").value;
var b = Math.sqrt(Math.pow(c, 2) - Math.pow(a, 2)); //Calculates sideB
//To make the drawings larger so that they are visible
if(a<20){
a = a*10;
}
if(b<20){
b = b*10;
}
if(c<20){
c = c*10;
}
\t \t var x3 = a;
var y3 = b;
var ox = 45 - (a/2);
var oy = 45 + (y3/2);
var points = [
[ox, oy].join(','),
[a + ox, oy].join(','),
[ox + x3, oy - y3].join(',')
].join(' ');
document.getElementById('triangleB').setAttribute('points', points);
}
var myBtn2 = document.getElementById('btn2');
myBtn2.addEventListener('click', function(event) {
drawSVGB();
});
function drawSVGA() {
var b = document.getElementById("b3").value;
var c = document.getElementById("c3").value;
var a = Math.sqrt(Math.pow(c, 2) - Math.pow(b, 2));//Calculates sideA
//To make the drawings larger so that they are visible
if(a<20){
a = a*10;
}
if(b<20){
b = b*10;
}
if(c<20){
c = c*10;
}
\t \t var x3 = a;
var y3 = b;
var ox = 45 - (a/2);
var oy = 45 + (y3/2);
var points = [
[ox, oy].join(','),
[a + ox, oy].join(','),
[ox + x3, oy - y3].join(',')
].join(' ');
document.getElementById('triangleA').setAttribute('points', points);
}
var myBtn3 = document.getElementById('btn3');
myBtn3.addEventListener('click', function(event) {
drawSVGA();
});body {
background-color:#f0f0f0;
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
}
div {
width:380px;
padding:20px;
border:1px solid #999;
margin:20px auto;
background-color:#fff;
box-shadow:10px 10px 20px #666;
font-size:100;
text-align:center;
}
div {
margin:10px 0;
float: left;
}<body>
<div>
<h2>Calculating C</h2>
<input id="a1" type="number" placeholder="side a"/>
<input id="b1" type="number" placeholder="side b"/>
<br/>
<button onclick="findC()">Find C</button>
<p id="outputC"></p>
<svg width="200" height="200">
<polygon id="triangleC"/>
</svg>
<button id="btn1" onclick="drawSVGC()">Draw</button>
</div>
<div>
<h2>Calculating B</h2>
<input id="c2" type="number" placeholder="side c"/>
<input id="a2" type="number" placeholder="side a"/>
<br/>
<button onclick="findB()">Find B</button>
<p id="outputB"></p>
<svg width="200" height="200">
<polygon id="triangleB"/>
</svg>
<button id="btn2" onclick="drawSVGB()">Draw</button>
</div>
<div>
<h2>Calculating A</h2>
<input id="c3" type="number" placeholder="side c"/>
<input id="b3" type="number" placeholder="side b"/>
<br/>
<button onclick="findA()">Find A</button>
<p id="outputA"></p>
<svg width="200" height="200">
<polygon id="triangleA"/>
</svg>
<button id="btn3" onclick="drawSVGA()">Draw</button>
</div>
</body>