메뉴 건너뛰기

조회 수 61 댓글 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.21 7372
206 한글 타이틀이 깨져 보입니다. 1 안스가리오 2020.01.06 13
» 11장 실습문제 6번 arc()문제 제발요 2019.12.06 61
204 10장 실습문제 6번 전역변수 설정에 관한 질문 1 제발요 2019.12.04 78
203 8장 실습 문제 5번 3 아리 2019.12.04 48
202 11장 6번 으엉 2019.11.27 63
201 document.write 내부에서의 onclick 이벤트 선언에 대한 오류 1 tlqk 2019.11.24 45
200 실습문제 6장 3번-2 1 어려워 2019.11.15 67
199 10장 오픈챌린지 질문입니다. 1 질문있어요 2019.11.10 137
198 서버설치와 코드편집기 질문 드려요~ 1 TS2019 2019.10.26 56
197 7장 6번 문제 질문 1 jj 2019.10.22 89
196 207p 4장 실습문제 3번 질문 1 file 웹개발초보 2019.10.19 48
195 8장 실습문제 2번에 (3)번 2 알려주셔요 2019.10.17 99
194 8장 실습문제 1번에 (2)번 알려주셔요 2019.10.17 49
193 7장 실습문제 1번 질문 드립니다. 1 111 2019.10.15 60
192 span과 text-align : center; 에 관한 문제입니다. file 2019.10.15 26
191 3장 4번 질문입니다 1 질문자 2019.10.04 77
190 3장오픈챌린지 질무닙니다. 1 파랑 2019.09.29 75
189 2장 오디오 실습문제에 대해서 질문이있습니다 1 ㅇㅇㅇ 2019.09.20 54
188 570page 예제 13-7 1 이주원! 2019.09.03 56
187 교재 225page 예제5-8 질문입니다. 1 ㅇㅅㅁ 2019.09.02 51
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 11 Next
/ 11
위로