자바스크립트를 이용한 x,y 좌표그래프 그리기 [x,y graph drawing using javascript]

자바스크립트 canvas를 이용하여 x,y 좌표 그래프를 그려보겠습니다. 예를 들어 볼 그래프는 캔틸레버 보 끝단에 집중하중이 작용할 때 처짐형상으로 하겠습니다. 아래 그림에서 빨간색 박스가 처짐 식입니다.

식을 구성하기 위한 입력값이 필요합니다. P(하중), L(길이), E(탄성계수), I(단면이차모멘트)이고 기본 값을 입력해 두었습니다.

코드는 다음과 같습니다.

<form name="myForm">

P : <input name="P_xyg" size="8" type="text" value="10" />&nbsp;(kN)<br>

L : <input name="L_xyg" size="8" type="text" value="20" />&nbsp;(m)<br>

E : <input name="E_xyg" size="8" type="text" value="200000000" />&nbsp;(kN·m)<br>

I : <input name="I_xyg" size="8" type="text" value="1" />&nbsp;(m⁴)

<br>

<input id="graph" value="graph" onclick="draw(document.myForm)" type="button"/>

<input id="gclear" type="button" value="clear" onclick="gclaer()"/><br>

Max(mm) : <input name="test_xyg" size="8" type="text"/>

</form>

<style>

    canvas {border:1px solid black;}

</style>

<body>

    <canvas id="canvas" height="140" width="440"></canvas>

</body>

<script language="javascript">

    function draw(form) {

        graphbtn = document.getElementById('graph');

        graphbtn.disabled = 'disabled';

        P_g = Number(form.P_xyg.value);

        L_g = Number(form.L_xyg.value);

        E_g = Number(form.E_xyg.value);

        I_g = Number(form.I_xyg.value);

        var div_g;

        div_g = L_g/20;

        var xx=[];

        var yy=[];

        var xx_xyg=[]; //그래프 x 좌표

        var yy_xyg=[]; //그래프 y 좌표

        for(i=0;i<21;i++){

        xx[i] = div_g*i

        yy[i] = P_g/6/E_g/I_g*Math.pow(xx[i]-L_g,2)*(xx[i]+2*L_g);

}

        var step_y=100/yy[0]; //그래프 크기를 100으로 잡았기 때문임

        for(i=0;i<21;i++){

        xx_xyg[i]=i*20+20;

        yy_xyg[i]=yy[i]*step_y+20;

}

        form.test_xyg.value = (yy[0]*1000).toFixed(3);

        var canvas ; 

        var context ;

        canvas = document.getElementById("canvas");

        context = canvas.getContext("2d");

        for(i=0;i<21; i++){

            context.fillRect(20*i+20,20,0.5,100);

}

        for(i=0;i<6; i++) {

            context.fillRect(20,20+20*i,400,0.5);

}

        context.font='13px Arial';

        context.fillText('Max='+(yy[0]*1000).toFixed(3)+'mm',20,135);

        context.font='10px Arial';

        context.fillText('0',20,15);

        context.fillText((L_g/2).toFixed(1),210,15);

        context.fillText((L_g).toFixed(1),410,15);

        context.strokeStyle="red";

        context.lineWidth=1.5;

        context.beginPath();

        context.moveTo(20,120);

        for(i=1;i<21; i++) {

            context.lineTo(xx_xyg[i],yy_xyg[i]);

}

        context.stroke();

        context.closePath();

}

    function gclaer() {

        resetbtn = document.getElementById('gclear');

        document.getElementById("canvas");

        context = canvas.getContext("2d").clearRect(0,0, canvas.width, canvas.height);

        document.getElementById('graph').disabled=false;

}

</script>

식 구성을 위한 입력박스 4개와 그래프를 그리고 지우는 버튼 2개를 만들었습니다. 그리고 최대처짐 값(Max) 확인용 입력박스도 만들었습니다. Canvas의 크기는 가로 140, 세로 440하여 좌우,아래위 20씩 여백을 둘수 있도록 하였습니다.

다음은 Script입니다. 그래프 버튼을 눌렀을 때 작동이 되지 않도록 graph 버튼은 disabled 처리를 했습니다. 왜냐면 graph를 다시 누르면 겹쳐지는 현상이 발생을 하여 clear 버튼을 누르는 걸 유도하기 위한 것입니다.

식에 의해 산정되는 값을 고정범위 안에 넣기 위해 값 조정을 했습니다.

// 처짐 식

for(i=0;i<21;i++){

xx[i] = div_g*i

yy[i] = P_g/6/E_g/I_g*Math.pow(xx[i]-L_g,2)*(xx[i]+2*L_g);

}

//Canvas용 좌표산정

var step_y=100/yy[0]; //그래프 크기를 100으로 음

for(i=0;i<21;i++){

xx_xyg[i]=i*20+20;

yy_xyg[i]=yy[i]*step_y+20;

}

x좌표에서 크기를 400, 등분은 20으로 정했기 때문에 연번 i에 곱하기 20을 한 것이고 시작점을 20으로 하고자 했기에 더하기 20을 했습니다.

y좌표에서는 크기를 100, 등분은 5로 정했습니다. 그리고 최대처짐값이 y그래프의 최하단으로 설정하여 간격설정을 위해 100/최대처짐값(yy[0])으로 step을 잡았습니다.

그래프 좌표설정은 여기까지며 나머지는 canvas 라인 그리기로 작업했습니다.

* 그리고 캔틸레버 끝단 집중하중에 대하 포스트에 그래프를 추가하여 SFD, BMD, 처짐까지 생성되도록 업데이트 하였습니다.

자바스크립트 선형대수(Linear Algebra) 행렬계산 (0)	2020.03.13
자바스크립트] Canvas Line 그리기 (1)	2020.03.12
자바스크립트 Chart.JS 바로 전 그래프 데이터 없애기 (0)	2020.03.11
로또번호 생성(자바스크립트) (8)	2020.03.08
Vscode에서 html을 chrome으로 실행하기 (0)	2020.03.08

Kkaesaem 깨샘