자바초바
20
2019-11-10 16:18:40
6
1248

JavaScript 원 그리기 관련 질문입니다 ㅜㅠㅜㅠㅜ


그냥 그리는게 아니라 사진처럼 폼 형태로 입력받아 그리는 문젠데 아무리 해봐도 안되네요ㅜㅠㅜ 도와주시면 감사하겠습니다 ㅜㅠㅜㅠ

0
  • 답변 6

  • moonti
    4k
    2019-11-10 16:53:57

    저거 캔버스고 그냥 하지마세요.

    캔버스는 쓸때만 쓰지 일반적으로 배울 내용은 아니에요. 

    필요할때 하시면 되요.

  • 자바초바
    20
    2019-11-10 17:57:41

    꼭 해야해서 ㅜㅠㅜ과제에요 ㅜㅠㅜㅠㅜ 하고싶습니다

    ㅠㅜㅠㅜ

  • moonti
    4k
    2019-11-10 18:55:31

    Mdn에가서 캔버스 도형에 대해 보시고 자스 코드는 예시가 있을지 모르겟습니다.

  • ondaa
    3k
    2019-11-10 19:35:29
    moonti 님 께서 말씀하신데 가서 예제 안되시면 말씀하세요 ㅋㅋ
  • 뿌에
    2
    2019-11-10 20:52:23 작성 2019-11-10 20:54:40 수정됨

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>폼으로 도형 그리기</title>
    <style>
    td {
    	text-align : right;
    	padding-left : 5px;
    	padding-right : 5px;
    }
    </style>
    <script>
    function draw() {
    	var canvas = document.getElementById("myCanvas");
    	var context = canvas.getContext("2d");
    
    	var x = document.getElementById("x").value;
    	var y = document.getElementById("y").value;
    	var radius = document.getElementById("radius").value;
    	
    	var ori = document.getElementById("orientation");
    	var index = ori.selectedIndex;
    	var orientation = ori.options[index].value;
    	orientation = (orientation == "true")?true:false;
    	
    	var startAngle = document.getElementById("startAngle").value;
    	startAngle = Math.PI*parseInt(startAngle)/180;
    	
    	var endAngle = document.getElementById("endAngle").value;
    	endAngle = Math.PI*parseInt(endAngle)/180;
    	
    	var lineWidth = document.getElementById("lineWidth").value;
    	var strokeStyle = document.getElementById("strokeStyle").value;	
    	
    	context.beginPath();
    	context.arc(x, y, radius, startAngle, endAngle, orientation);
    	context.lineWidth = lineWidth;
    	context.strokeStyle = strokeStyle;
    	context.stroke();
    }
    function erase() {
    	var canvas = document.getElementById("myCanvas");
    	var context = canvas.getContext("2d");
    	context.clearRect(0, 0, canvas.width, canvas.height);
    }
    </script>
    </head>
    <body>
    </body>
    <h3>폼으로 원호 그리기</h3>
    <hr>
    <form>
    <table>
    <tr><td><label>x <input id="x" type="number" value="100"></label></td>
    	<td><label>y <input id="y" type="number" value="100"></label></td></tr>
    <tr>	
    	<td><label>반지름 <input id="radius" type="number" value="80"></label></td>
    	<td><label>방향 <select id="orientation">
    					<option value="false" selected>시계방향</option>
    					<option value="true">반시계방향</option>
    				   </select>
    	</label></td>
    </tr>
    <tr><td><label>시작각도 <input id="startAngle" type="number" value="0"></label></td>
    	<td><label>끝각도 <input id="endAngle" type="number" value="360"></label></td>
    </tr>
    <tr><td><label>선굵기 <input id="lineWidth" type="number" value="1"></label></td>
    	<td><label>선색 <input id="strokeStyle" type="color" value="#000000"></label></td></tr>
    <tr><td><label><button type="button" onclick="draw()">그리기</button></label></td>
    	<td><button type="button" onclick="erase()">지우기</button></td></tr>
    </table>
    </form>
    <canvas id="myCanvas" width="500" height="200" 
            style="background-color:aliceblue"></canvas>
    </html>

  • 자바초바
    20
    2019-11-11 10:58:52

    너무너무 감사합니다 ㅠㅠ 꼭 그냥 제출하지않고 써주신 코드보고 공부하고 다 이해하고 제출할게요

    도움주셔서 감사합니다

  • 로그인을 하시면 답변을 등록할 수 있습니다.