메뉴 건너뛰기

2019.11.27 22:10

11장 6번

조회 수 25 댓글 0

<!DOCTYPE html>

<html>

<head>

<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 anticlockwise = document.getElementById("anticlockwise").value;

    var startangle = document.getElementById("startangle").value;

    var endangle = document.getElementById("endangle").value * (Math.PI/2);

    var lineWidth = document.getElementById("lineWidth").value;

    var strokeStyle = document.getElementById("strokeStyle").value; 

 

    context.beginPath(); //도형그리기 시작

    context.arc(x, y, radius, false, startangle, endangle);

    context.lineWidth = lineWidth;

    context.strokeStyle = strokeStyle;

    context.stroke();

}

function erase() {

    var canvas = document.getElementById("myCanvas");

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

    context.arc(0, 0, canvas.radius, canvas.anticlockwise, canvas.startangle, canvas.endangle);

}

</script>

</head>

<body>

</body>

<h3>폼으로 원호 그리기</h3>

<hr>

<form>

<table>

<tr><td><label>x <input id="x" type="number" value="10"></label></td>

    <td><label>y <input id="y" type="number" value="10"></label></td></tr>

<tr><td><label>반지름 <input id="radius" type="number" value="100"></label></td>

    <td><label>방향 <input id="anticlockwise" type="text" value="시계방향"></label></td></tr>

<tr><td><label>시작각도 <input id="startangle" type="number" value="0"></label></td>

    <td><label>끝각도 <input id="endangle" type="number" value="180"></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>

 

 

도대체 어디가 틀리지 모르겠지만 아예 그리기가 안됩니다 여기서부터 어떻게 해야할지 모르겠습니다..

<body>에서 방향을 selcet로 해야하는 건가요? <script>에서 시작 각도랑 끝 각도는 어떻게 해야하나요 ㅠㅠ 멘붕입니다 ㅠㅠㅠㅠ

?

QnA

공부하면서 궁금했던 것을 질문해보세요.

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.21 7106
205 11장 실습문제 6번 arc()문제 new 제발요 2019.12.06 0
204 10장 실습문제 6번 전역변수 설정에 관한 질문 1 제발요 2019.12.04 11
203 8장 실습 문제 5번 2 아리 2019.12.04 8
» 11장 6번 으엉 2019.11.27 25
201 document.write 내부에서의 onclick 이벤트 선언에 대한 오류 1 tlqk 2019.11.24 26
200 실습문제 6장 3번-2 1 어려워 2019.11.15 55
199 10장 오픈챌린지 질문입니다. 1 질문있어요 2019.11.10 106
198 서버설치와 코드편집기 질문 드려요~ 1 TS2019 2019.10.26 42
197 7장 6번 문제 질문 1 jj 2019.10.22 78
196 207p 4장 실습문제 3번 질문 1 file 웹개발초보 2019.10.19 46
195 8장 실습문제 2번에 (3)번 2 알려주셔요 2019.10.17 92
194 8장 실습문제 1번에 (2)번 알려주셔요 2019.10.17 43
193 7장 실습문제 1번 질문 드립니다. 1 111 2019.10.15 56
192 span과 text-align : center; 에 관한 문제입니다. file 2019.10.15 22
191 3장 4번 질문입니다 1 질문자 2019.10.04 72
190 3장오픈챌린지 질무닙니다. 1 파랑 2019.09.29 72
189 2장 오디오 실습문제에 대해서 질문이있습니다 1 ㅇㅇㅇ 2019.09.20 52
188 570page 예제 13-7 1 이주원! 2019.09.03 52
187 교재 225page 예제5-8 질문입니다. 1 ㅇㅅㅁ 2019.09.02 47
186 예제 5-6 질문입니다. 1 file 이상민 2019.09.01 58
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 11 Next
/ 11
위로