메뉴 건너뛰기

2019.11.27 22:10

11장 6번

조회 수 187043 댓글 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
262 9장 연습문제8번 1 한정수 2018.12.13 336
261 안녕하세요 처음하는 사람입니다 교재 구입하였습니다 2 성현군 2017.06.29 330
260 실습문제 4장의 8번 2 file ㅁㄴㅇㄹ 2018.12.14 329
259 구버전 책을 구입해버렸어요.. 3 구닥 2018.05.07 329
258 실습문제 5장 3번 254p 1 RVQ 2018.05.10 328
257 명품 html5+css3책과 HTML의 차이가 궁금합니다 저자님 2 보안 2019.05.03 326
256 7장 10번 트레비 2018.12.18 321
255 실습문제 9-8번 질문 있습니다. 2 muuum 2018.10.24 320
254 7장 2번 무지 2018.12.18 319
253 page 46 마우스 올릴시 이미지 출력 2 file 공부중 2020.09.10 318
252 8장 실습문제 2번에 (3)번 2 알려주셔요 2019.10.17 317
251 6장 예제 6-23 1 은성 2017.04.04 317
250 7장 1번 1 2020.11.30 311
249 실습문제답도 제공이 안되는 건가요? 2 아침이 2019.01.07 311
248 5장 10번 실습문제 1 익명 2018.09.29 311
247 9장 실습문제 9번 문의사항 1 file 이태복 2018.04.03 309
246 자바스크립트에 대해 1 이윤재 2017.01.26 309
245 질문드립니다. 1 ㅇㅇ 2020.06.03 306
244 예제 3-11 1 새싹 2018.04.23 301
243 실습문제 9-7번 답안지를 보고 질문있습니다. 2 muuum 2018.10.23 300
목록
Board Pagination Prev 1 ... 3 4 5 6 7 8 9 10 11 12 ... 21 Next
/ 21
위로