jQuery | javascript | CSS

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

Godffs 2014. 2. 1. 15:37
반응형

HTML5 에 새로 추가된 캔버스 입니다.
 캔버스는 그림을 그리드는 기능을 갖고 있는데요.
도형을 그리는 순서는
캔버스 객체를 얻고, 캔버스 객체로 부터 컨텍스트를 얻고, 컨텍스트의 메서드, 속성을 가지고 그림을 그립니다. 렌더링~

fillRect(시작 X좌표, 시작 Y좌표,  사각형의 가로, 사각형의 세로)

간단하게 사각형 모양으로 그림을 그려봅니다.

 ex03.canvas.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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title></title>
    
    <!--객체 크기 설정-->
    <style type="text/css">
        #can1 {
            height: 300px;
            width: 300px;
        }
    </style>
</head>
<body>
    <canvas id="can1" ></canvas>
 
    <script type="text/javascript">
        var canvas = document.getElementById("can1"); //1.캔버스 객체 가져오기
 
        //2.객체로 부터 컨텍스트를 얻기
        var cv = canvas.getContext("2d"); //2d : 2차원 그림을 의미
 
        //3.컨텍스트의 메서드, 속성을 이용하여 그림 그리기
        cv.fillStyle = "rgb(255,255,0)";    //배경색 지정 (HTML, RGB, RGB + 투명도)
        cv.fillRect(50, 50, 200, 200);   //모양 랜더링
    </script>
</body>
</html>
  
 



결과를 확인합니다.

참 쉽죠~?
반응형
저작자표시 비영리 변경금지 (새창열림)