메뉴 건너뛰기

2019.11.27 22:10

11장 6번

조회 수 187044 댓글 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 18177
322 버튼 태그에 대해서 궁금한게 있습니다!! 1 아이디가뭐였지 2021.03.22 128
321 2장 이론문제 3번 1 알고싶어요 2021.03.14 1328
320 14장 예제 사라진 건가요 1 ... 2021.03.09 4077
319 ch1 이론문제 1번 2 새내기 2021.03.06 217
318 연습문제 짝수답은어디있나요?? 2021.02.16 825
317 9장 실습문제 10번 2 왜죠 ㅠㅠ 2021.01.24 1203
316 명품 html5+ 수정판 css3+ javascript 웹 프로그래밍 실습문제 이미지 파일 어디서 다운 받아요? 1 미카엘 2021.01.14 728
315 p.296 isNaN 함수 1 yamto 2020.12.28 179
314 실습문제 6장 6-(1) 어떻게 하는 건가요? 1 초보자 2020.12.23 215
313 실습문제 7장 5번 1 유등등 2020.12.17 694
312 13-5 하고 13-6 error 1 WebWeb 2020.12.09 148
311 7장 1번 1 2020.11.30 311
310 9장 실습문제 10번 계산기 만들기 2 호탱 2020.11.29 351
309 6장 오픈챌린지 질문 1 giggle 2020.11.23 275
308 Page 396 script 위치 관련 질문 드립니다 2 질문드립니다 2020.11.05 154
307 실습 8장 8번 문제 질문이요! 1 2020.11.03 247
306 chapter5 오픈챌린지 5장 아예 모르겠어요.. 열심히해보자 2020.11.03 292
305 안녕하세요? 186쪽 예제 4-13 대해서 물어봅니다. 1 file 김현우 2020.11.02 125
304 5-3 220page 1 고수가되고싶어요 2020.10.24 141
303 7장 실습문제 10번 좀 도와주세요 ㅜㅠ 헷찡 2020.10.18 233
목록
Board Pagination Prev 1 ... 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로