Canvas 에 패스 그리기

티스토리 뷰

DEV/HTML5

Canvas 에 패스 그리기

초록매실원액 2015. 11. 30. 09:20

path 관련 API를 사용하여 모든 모양 생성 가능

- beginPath() : 경로 그리기 시작

- closePath() : 경로 그리기 종료

- lineTo() : 선 그리기

- mobeTo() : 이동

- arc() : 호 그리기

- arcTo() : 호 그리기

- quadraticCurveTo() : 이차 베지어(베지에) 곡선

- bezierCurveTo() : 베지어 곡선

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>HTML5 canvas - 삼각형 그리기</title>
    <meta charset="utf-8">
    <style type="text/css">
    #myCanvas { border:1px solid red; }
 </style>
    <script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        // jQuery를 사용하여 페이지 로드 이벤트 핸들러 처리
        $(function () {
            var theCanvas = document.getElementById("myCanvas");
            if (theCanvas.getContext) {
                var ctx = theCanvas.getContext("2d");
                // begin
                ctx.beginPath(); // 경로 그리기 시작
                ctx.moveTo(50, 50); // 기준 좌표값 이동
                ctx.lineTo(200, 50); // X, Y 좌표를 사용하여 선 그리기 
                ctx.lineTo(50, 200);
                ctx.fill(); // 경로 그리기 종료(채움)
                //ctx.closePath(); // 경로 그리기 종료
                //ctx.stroke(); // 테두리 그리기
                // end
            }
            else {
                alert("캔버스의 getContext() 함수를 지원하지 않습니다.");
            }
        });
 </script>
</head>
<body>
    <canvas id="myCanvas" width="640" height="480">
        당신의 브라우저는 canvas 요소를 지원하지 않습니다.
    </canvas>
</body>
</html>
Colored by Color Scripter
cs