메뉴 건너뛰기

2019.11.27 21:10

11장 6번

조회 수 100 댓글 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.20 9516
212 예제 2-21 1 Daisy 2020.03.28 28
211 7장의 8번문제 1 궁금 2020.03.20 107
210 71page 1 아리송 2020.03.07 26
209 1장 test1, 2, 3 파일 2 열공중 2020.03.07 80
208 html에 css작성할때 2 궁금이 2020.03.03 43
207 61 page 실습문제 1번 오류찾기 2 궁금이 2020.02.15 489
206 한글 타이틀이 깨져 보입니다. 1 안스가리오 2020.01.06 46
205 11장 실습문제 6번 arc()문제 제발요 2019.12.06 126
204 10장 실습문제 6번 전역변수 설정에 관한 질문 1 제발요 2019.12.04 143
203 8장 실습 문제 5번 3 아리 2019.12.04 102
» 11장 6번 으엉 2019.11.27 100
201 document.write 내부에서의 onclick 이벤트 선언에 대한 오류 1 tlqk 2019.11.24 105
200 실습문제 6장 3번-2 1 어려워 2019.11.15 100
199 10장 오픈챌린지 질문입니다. 1 질문있어요 2019.11.10 194
198 서버설치와 코드편집기 질문 드려요~ 1 TS2019 2019.10.26 68
197 7장 6번 문제 질문 1 jj 2019.10.22 129
196 207p 4장 실습문제 3번 질문 1 file 웹개발초보 2019.10.19 68
195 8장 실습문제 2번에 (3)번 2 알려주셔요 2019.10.17 150
194 8장 실습문제 1번에 (2)번 알려주셔요 2019.10.17 101
193 7장 실습문제 1번 질문 드립니다. 1 111 2019.10.15 88
목록
Board Pagination Prev 1 ... 2 3 4 5 6 7 8 9 10 ... 15 Next
/ 15
위로