Blog Content

  1. Home

    티스토리 뷰

    HTML5 - 09.canvas 기본사용 : 도형그리기 응용 (캔버스)

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

    반응형
    사각형, 삼각형, 원 그리기 기초를 했는데요. 이를 응용해서 간단하게 제가 좋아하는 애니메이션중
    그랑죠의 마법진을 그려봤습니다...피닉스랑, 포세이돈은...-_-a

     ex06.Shape.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
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    <!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, Math.PI * 2, true);
            cv.stroke();
            cv.closePath();
     
            cv.beginPath();
            cv.arc(100, 100, 40, 0, Math.PI * 2, true);
            cv.stroke();
            cv.closePath();
     
            cv.beginPath();
            cv.moveTo(100, 60);
            cv.lineTo(60, 110);
            cv.lineTo(140, 110);
            cv.fillStyle = "rgb(255,0,0)";
            cv.fill();
            cv.closePath();
            
            cv.beginPath();
            cv.moveTo(100, 140);
            cv.lineTo(65, 80);
            cv.lineTo(135, 80);
            cv.fillStyle = "rgb(255,0,0)";
            cv.fill();
            cv.closePath();
            
            cv.beginPath();
            cv.moveTo(100, 60);
            cv.lineTo(60, 110);
            cv.lineWidth = 3;
            cv.stroke();
            cv.closePath();
     
            cv.beginPath();
            cv.moveTo(100, 60);
            cv.lineTo(140, 110);
            cv.lineWidth = 3;
            cv.stroke();
            cv.closePath();
     
            cv.beginPath();
            cv.moveTo(60, 110);
            cv.lineTo(140, 110);
            cv.lineWidth = 3;
            cv.stroke();
            cv.closePath();
     
            cv.beginPath();
            cv.moveTo(60, 110);
            cv.lineTo(140, 110);
            cv.lineWidth = 3;
            cv.stroke();
            cv.closePath();
     
            cv.beginPath();
            cv.moveTo(100, 140);
            cv.lineTo(65, 80);
            cv.lineWidth = 3;
            cv.stroke();
            cv.closePath();
     
            cv.beginPath();
            cv.moveTo(65, 80);
            cv.lineTo(135, 80);
            cv.lineWidth = 3;
            cv.stroke();
            cv.closePath();
     
            cv.beginPath();
            cv.moveTo(135, 80);
            cv.lineTo(100, 140);
            cv.lineWidth = 3;
            cv.stroke();
            cv.closePath();
     
        </script>
    </body>
    </html>
     

    결과를 확인합니다.

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

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

    HTML5 - 09.canvas : 그림판 1차 코드  (0) 2014.03.22
    HTML5 - 10.canvas : 마우스로 그리기  (2) 2014.02.16
    HTML5 - 08.canvas 기본사용 : 원 (캔버스)  (0) 2014.02.16
    HTML5 - 07.canvas 기본사용 : 삼각형 (캔버스)  (0) 2014.02.16
    HTML5 - 06.canvas 기본사용 : 사각형 (캔버스)  (0) 2014.02.01

    Comments

Copyright © 2016 by WaaNee. All Rights Reserved.

티스토리툴바