├── 01-start
├── 01.html
├── 02.html
└── modernizr.js
├── 02-draw
├── 01.html
├── 02.html
└── 03.html
├── 03-animation
├── 01-2.html
├── 01.html
└── 02.html
├── 04-image
├── 01.html
└── 02.html
├── 05-video
├── 01.html
├── 02.html
└── 03.html
├── 06-transform
├── 01.html
└── 02.html
├── 07-interaction
├── 01.html
├── 02.html
├── Box.js
├── Panel.js
└── utils.js
└── images
├── ilbuni1.png
├── ilbuni2.png
├── ilbuni3.png
├── sprite-ilbuni-hi.png
└── video.mp4
/01-start/01.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Canvas
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/01-start/02.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Canvas
5 |
6 |
7 |
17 |
18 |
19 |
20 | 캔버스 사이즈 설정
21 |
22 |
23 |
24 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/01-start/modernizr.js:
--------------------------------------------------------------------------------
1 | /*! modernizr 3.6.0 (Custom Build) | MIT *
2 | * https://modernizr.com/download/?-canvas-setclasses !*/
3 | !function(e,n,t){function s(e,n){return typeof e===n}function a(){var e,n,t,a,o,i,f;for(var c in l)if(l.hasOwnProperty(c)){if(e=[],n=l[c],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t
2 |
3 |
4 | Canvas
5 |
6 |
7 |
12 |
13 |
14 |
15 |
16 |
17 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/02-draw/02.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Canvas
5 |
6 |
7 |
12 |
13 |
14 |
15 |
16 |
17 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/02-draw/03.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Canvas
5 |
6 |
7 |
12 |
13 |
14 |
15 |
16 |
17 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/03-animation/01-2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Canvas
5 |
6 |
7 |
12 |
13 |
14 |
15 | requestAnimationFrame
16 |
17 |
18 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/03-animation/01.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Canvas
5 |
6 |
7 |
12 |
13 |
14 |
15 | requestAnimationFrame
16 |
17 |
18 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/03-animation/02.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Canvas
5 |
6 |
7 |
12 |
13 |
14 |
15 | setInterval
16 |
17 |
18 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/04-image/01.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Canvas
5 |
6 |
7 |
12 |
13 |
14 |
15 | Image
16 |
17 |
18 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/04-image/02.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Canvas
5 |
6 |
7 |
30 |
31 |
32 |
33 | Image
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
--------------------------------------------------------------------------------
/05-video/01.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Canvas
5 |
6 |
7 |
17 |
18 |
19 |
20 | Video
21 |
22 |
23 |
24 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/05-video/02.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Canvas
5 |
6 |
7 |
17 |
18 |
19 |
20 | Video
21 |
22 |
23 |
24 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
--------------------------------------------------------------------------------
/05-video/03.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Canvas
5 |
6 |
7 |
17 |
18 |
19 |
20 | Video
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
--------------------------------------------------------------------------------
/06-transform/01.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Canvas
5 |
6 |
7 |
12 |
13 |
14 |
15 | Transform
16 |
17 |
18 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/06-transform/02.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Canvas
5 |
6 |
7 |
12 |
13 |
14 |
15 | Transform
16 |
17 |
18 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
--------------------------------------------------------------------------------
/07-interaction/01.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Canvas
5 |
6 |
7 |
12 |
13 |
14 |
15 | Interaction
16 |
17 |
18 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/07-interaction/02.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Canvas
5 |
6 |
7 |
12 |
13 |
14 |
15 | Interaction
16 |
17 |
18 |
19 |
20 |
21 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
--------------------------------------------------------------------------------
/07-interaction/Box.js:
--------------------------------------------------------------------------------
1 | class Box {
2 | constructor(index, x, y, speed) {
3 | this.index = index;
4 | this.x = x;
5 | this.y = y;
6 | this.speed = speed;
7 | this.width = 100;
8 | this.height = 100;
9 | this.draw();
10 | }
11 |
12 | draw() {
13 | context.fillStyle = 'rgba(0,0,0,0.5)';
14 | context.fillRect(this.x, this.y, 100, 100);
15 | context.fillStyle = '#fff';
16 | context.fillText(this.index, this.x+30, this.y+30);
17 | }
18 | }
--------------------------------------------------------------------------------
/07-interaction/Panel.js:
--------------------------------------------------------------------------------
1 | class Panel {
2 | constructor() {
3 | this.scale = 0.01;
4 | this.angle = 0;
5 | }
6 |
7 | draw() {
8 | context.fillStyle = 'rgba(255,0,0,0.8)';
9 | // 변환 초기화;
10 | context.resetTransform();
11 | // context.setTransform(1,0,0,1,0,0);
12 | context.translate(oX, oY);
13 | context.scale(this.scale, this.scale);
14 | context.rotate(canUtil.toRadian(this.angle));
15 | context.translate(-oX, -oY);
16 | context.fillRect(oX-150, oY-150, 300, 300);
17 | context.resetTransform();
18 | }
19 |
20 | showContent() {
21 | console.log('showContent 실행');
22 | context.fillStyle = '#fff';
23 | context.fillText(selectedBox.index, oX, oY);
24 | }
25 | }
--------------------------------------------------------------------------------
/07-interaction/utils.js:
--------------------------------------------------------------------------------
1 | const canUtil = {
2 | toRadian: function (degree) {
3 | return degree * Math.PI/180;
4 | }
5 | };
--------------------------------------------------------------------------------
/images/ilbuni1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmyoow/canvasbasic/c37528ce0bf16208eff7848348fd9d6b570eb6cc/images/ilbuni1.png
--------------------------------------------------------------------------------
/images/ilbuni2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmyoow/canvasbasic/c37528ce0bf16208eff7848348fd9d6b570eb6cc/images/ilbuni2.png
--------------------------------------------------------------------------------
/images/ilbuni3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmyoow/canvasbasic/c37528ce0bf16208eff7848348fd9d6b570eb6cc/images/ilbuni3.png
--------------------------------------------------------------------------------
/images/sprite-ilbuni-hi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmyoow/canvasbasic/c37528ce0bf16208eff7848348fd9d6b570eb6cc/images/sprite-ilbuni-hi.png
--------------------------------------------------------------------------------
/images/video.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmyoow/canvasbasic/c37528ce0bf16208eff7848348fd9d6b570eb6cc/images/video.mp4
--------------------------------------------------------------------------------