Blog Content

  1. Home

    티스토리 뷰

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

    Posted by Godffs on 2014. 2. 1. 15:37 in jQuery | javascript | CSS /

    반응형

    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>
      
     



    결과를 확인합니다.

    참 쉽죠~?
    반응형
    저작자표시 비영리 변경금지

    'jQuery | javascript | CSS' 카테고리의 다른 글

    HTML5 - 08.canvas 기본사용 : 원 (캔버스)  (0) 2014.02.16
    HTML5 - 07.canvas 기본사용 : 삼각형 (캔버스)  (0) 2014.02.16
    HTML5 - 05.ViewPort (뷰포트)  (2) 2014.01.26
    HTML5 - 04.디바이스 별로 화면보기  (0) 2014.01.26
    HTML5 - 03.디버깅  (0) 2014.01.25

    Comments

Copyright © 2016 by WaaNee. All Rights Reserved.

티스토리툴바