jQuery | javascript | CSS

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

Godffs 2014. 2. 16. 16:33
반응형
사각형, 삼각형, 원 그리기 기초를 했는데요. 이를 응용해서 간단하게 제가 좋아하는 애니메이션중
그랑죠의 마법진을 그려봤습니다...피닉스랑, 포세이돈은...-_-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>
 

결과를 확인합니다.

참 쉽죠~? 끝
반응형