>

3 개의 입력과 버튼이 있습니다. 이 버튼을 클릭하면 3 변의 길이가 입력 값과 같은 삼각형을 그려야합니다. 그것을 조직하는 방법? 나는 이것을 발견했다 :

context.beginPath();
context.moveTo(30, 20);
context.lineTo(some_value1,some_value2);
context.lineTo(some_value3,some_value4);
context.closePath();

그러나이 방법은 양면에 그리기에 적합합니다. 문제를 자세히 설명했으면합니다. 미리 감사드립니다.

  • 답변 # 1

    각 점의 직교 좌표를 먼저 계산해야합니다. 첫 번째 포인트를 [0, 0] 로 설정할 수 있습니다 두 번째는 [x1, 0] 에 있습니다.  어디 x1  첫 줄의 길이입니다. 세 번째 점을 계산해야합니다.이 작업을 수행하는 방법은 여기를 참조하십시오.

    https://math.stackexchange.com/questions/543961/determine-third-point-of-triangle-when-two-points-and-all-sides-are-knowns

    // hardcoded, but you would get those from user
    var AB = 40;
    var BC = 50;
    var AC = 30;
    var A = [0, 0]; // starting coordinates
    var B = [0, AB];
    var C = [];
    // calculate third point
    C[1] = (AB * AB + AC * AC - BC * BC) / (2 * AB);
    C[0] = Math.sqrt(AC * AC - C[1] * C[1]);
    console.log(A, B, C);
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(A[0], A[1]);
    ctx.lineTo(B[0], B[1]);
    ctx.lineTo(C[0], C[1]);
    ctx.fill();
    
    

    <canvas id="canvas" width="500" height="500"></canvas>
    
    

  • 이전 bash - 실행중인 프로그램으로 usermod 강제 실행
  • 다음 javascript - Animate CC의 HTML5 Canvas 제작로드를 여러 번로드