메뉴 건너뛰기

조회 수 126 댓글 0

<!DOCTYPE html>

<html>

 

<head>

    <title>

        폼으로 원형 그리기

    </title>

    <style>

        td {

            text-align: right;

            width: 80px;

            height: 30px;

        }

    </style>

 

</head>

 

<body>

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

    <hr>

    <table>

        <tbody>

            <tr>

                <td>x</td>

                <td><input type="text" id="text1" value="100"></td>

                <td>y</td>

                <td><input type="text" id="text2" value="100"></td>

            </tr>

            <tr>

                <td>반지름</td>

                <td><input type="text" id="text3" value="80"></td>

                <td>방향</td>

                <td><select id="direc">

                        <!--시계방향=false // 반시계방향=true-->

                        <option value="false">시계방향</option>

                        <option value="true">반시계방향</option>

                    </select></td>

            </tr>

            <tr>

                <td>시작각도</td>

                <td><input type="text" id="text4" value="0"></td>

                <td>끝각도</td>

                <td><input type="text" id="text5" value="360"></td>

            </tr>

            <tr>

                <td>선굵기</td>

                <td><input type="text" id="text6" value="1"></td>

                <td>선색</td>

                <td><input type="color" id="color" ></td>

            </tr>

            <tr>

                <td></td>

                <td><input type="button" id="button1" value="그리기" onclick="draw()"></td>

                <td></td>

                <td><input type="button" id="button2" value="지우기" onclick="del()"></td>

            </tr>

        </tbody>

 

    </table>

    <canvas id="canvas" width="800" height="500" style="background:skyblue;"></canvas>

 

    <script>

        let canvas = document.getElementById("canvas");

        let context = canvas.getContext("2d");//잊어먹지말것

        let x, y, rad, direc, start_angle, end_angle, line_width, color, button1, button2;

 

        function draw() {

            context.beginPath(); 

            x = document.getElementById("text1");

            x = parseInt(x.value);

 

            y = document.getElementById("text2");

            y = parseInt(y.value);

 

            rad = document.getElementById("text3");

            rad = parseInt(rad.value);

 

            direc = document.getElementById("direc");// 다른거와다름

            direc = direc.value;

            

            

            start_angle = document.getElementById("text4");

            console.log("start 입력한 값 :"+start_angle.value);

            start_angle = (parseInt(start_angle.value))/180*Math.PI;//원주율 참고

           

            end_angle = document.getElementById("text5");

            console.log("end 입력한 값 :"+end_angle.value);

            end_angle = (parseInt(end_angle.value))/180*Math.PI;

          

            line_width = document.getElementById("text6");

            line_width = parseInt(line_width.value);

 

            color = document.getElementById("color");

            color=color.value;

 

            context.arc(x, y, rad, start_angle, end_angle, direc);//<< 문제발생!!!!!!!!!!!!!!!!!!!!

            console.log("시계반시계 :"+direc);

            console.log("start_angle :"+start_angle);

            console.log("end_angle :"+end_angle);

            context.strokeStyle=color;//이거 맞냐?

            console.log(color);

            context.lineWidth=line_width;

            

            context.stroke();

        }

 

        function del(){

            context.clearRect(0, 0, canvas.width, canvas.height);

        }

        


 

    </script>

</body>

 

</html>

 

----------------------------------

각도에 따라 호가 그려져야 되는데 각도와 반대된 상태로 뒤집어져서 그려지고 시계 반시계방향의 구분이 없어졌어요

?

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
» 11장 실습문제 6번 arc()문제 제발요 2019.12.06 126
204 10장 실습문제 6번 전역변수 설정에 관한 질문 1 제발요 2019.12.04 143
203 8장 실습 문제 5번 3 아리 2019.12.04 102
202 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
위로