Blog Content

  1. Home

    티스토리 뷰

    HTML5 - 08.canvas 기본사용 : 원 (캔버스)

    Posted by Godffs on 2014. 2. 16. 15:49 in jQuery | javascript | CSS /

    반응형

    캔버스를 이용해서 원을 그리는 예제 입니다.

    원을 그리는데 사용되는 메서드는
    arc()메서드를 사용해서 그립니다.

    arc(x좌표, y좌표, 반경(반지름), 시작점, 끝 점, 방향)을 설정합니다.


     ex05.Circle.html
     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
    </head>
    <body>
        
        <canvas id="can1" width="300" height="300"></canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("can1");
            var cv = canvas.getContext("2d");
     
            cv.beginPath();
            cv.arc(100, 100, 50, 0, 2*Math.PI, true);
            cv.fill();
            cv.closePath();
     
        </script>
    </body>
    </html>
     

    결과를 확인합니다.


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

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

    HTML5 - 10.canvas : 마우스로 그리기  (2) 2014.02.16
    HTML5 - 09.canvas 기본사용 : 도형그리기 응용 (캔버스)  (0) 2014.02.16
    HTML5 - 07.canvas 기본사용 : 삼각형 (캔버스)  (0) 2014.02.16
    HTML5 - 06.canvas 기본사용 : 사각형 (캔버스)  (0) 2014.02.01
    HTML5 - 05.ViewPort (뷰포트)  (2) 2014.01.26

    Comments

Copyright © 2016 by WaaNee. All Rights Reserved.

티스토리툴바