jQuery | javascript | CSS

HTML5 - 07.canvas 기본사용 : 삼각형 (캔버스)

Godffs 2014. 2. 16. 15:15
반응형
캔버스를 이용하여 삼각형을 그리는 예제 입니다.

삼각형 모양을 그릴때는

moveTo(),lineTo() 메서드를 사용해서 좌표를 지정합니다.
moveTo로 시작지점을 그리고, lineTo로 선을 그립니다.

안에 소스에 설명 추가 하였습니다.

 ex04.Triangle.html
 
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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #can1 {
            width:300px;
            height:300px;
        }
    </style>
</head>
<body>
    <canvas id="can1"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("can1");
        var cv = canvas.getContext("2d");
 
        //삼각형 그리기
        cv.beginPath(); //패스를 초기화
 
        cv.moveTo(50, 0);      //시작위치 X,Y좌표
        cv.lineTo(0, 50);      //선 그리기
        cv.lineTo(100, 50);    //선 그리기
 
        cv.closePath();         //그리기 종료
        cv.fillStyle = "rgb(0,0,255)";
        cv.fill();              //삼각형 그리기 렌더링
    </script>
</body>
</html>
 

결과를 확인합니다.


참 쉽죠~? 끝
반응형