728x90
반응형
캔버스 : 자바스크립트를 이용하여 일러스트와 그림판처럼 화면에 선을 그릴 수 있다.
순서
1. 캔버스 요소찾기
let canvas = document.querySelector("canvas");
2. 드로잉 객체 생성
let ctx = canvas.getContext("2d"); //2d ,3d 정할수 있음▶ getContext()함수는 드로잉에 필요한 속성과 함수를 가진 객체를 생성함
3. 캔버스에 그리기↓
▶ 사각형 그리기!!!!!!
1) fillRect(x, y, width, height)
▶ 색칠된 사각형 그리기
ctx.fillRect(100, 50, 100, 100);
2) strokeRect(x, y, width, height)
▶ 윤곽선으로만 사각형 그리기
ctx.strokeRect(200, 200, 50, 50);
3) clearRect(x, y, width, height)
▶사각형 영역을 지우는 메소드
ctx.clearRect(100, 50, 50, 50);
예시)
See the Pen Untitled by namminimi (@namminimi) on CodePen.
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
background-color: #eee;
}
</style>
</head>
<body>
<canvas width="500" height="300"></canvas>
<script>
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
//2d ,3d 정할수 있음 ctx.fillStyle = "blue";
//대문자 조심 ctx.fillRect(100, 50, 100, 100);
//색칠된 사각형 그리기 ctx.clearRect(100, 50, 50, 50);
//사각형 영역을 지우는 메소드 ctx.strokeRect(200, 200, 50, 50);
//윤곽선으로만 사각형 그리기 //패스를 시작(펜도구 선택)
ctx.beginPath();
//시작 위치 - 처음 점을 찍기
ctx.moveTo(250, 50);
//선그리기 - 다음 점 찍기
ctx.lineTo(300, 50);
ctx.lineTo(300, 70);
//ctx.fill();
ctx.stroke();
</script>
</body>
</html>
|
cs |
▶ 경로 그리기!!!!!!
1) beginPath()
새로운 경로를 만들기
2) closePath()
도형 닫기(현재 점위치와 시작점 위치를 직선으로 이어줌)
3) stroke()
윤곽선을 이용해 도형 그리기
4) fill()
경로의 내부를 채워서 내부가 채워진 도형 그리기
5) moveTo()
시작 위치 - 처음 점을 찍기
6)lineTo()
선그리기 - 다음점 찍기
예시)
See the Pen Untitled by namminimi (@namminimi) on CodePen.
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
background-color: #eee;
}
</style>
</head>
<body>
<canvas width="1000" height="500"></canvas>
<script>
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
//새로운 경로 만들기
ctx.moveTo(100, 100);
//시작위치 - 처음 점을 찍기
ctx.lineTo(100, 250);
//선그리기 - 다음점
ctx.lineTo(250, 250);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(260, 100);
ctx.lineTo(260, 350);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(250, 250);
ctx.lineTo(300, 250);
ctx.stroke();
</script>
</body>
</html>
|
cs |
▶ 호 그리기!!!!!!
arc(x, y,반지름, 시작각도, 끝각도방향)
예시)
See the Pen Untitled by namminimi (@namminimi) on CodePen.
|
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 lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
background-color: #eee;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="500"></canvas>
<script>
let canvas = document.querySelector("canvas");
//캔버스 요소 선택
let ctx = canvas.getContext("2d");
//드로잉 객체생성
ctx.beginPath();
//새로운 경로 만들기
ctx.arc(100, 100, 50, 0, Math.PI*2, true);
//원형, 호 그리기
ctx.fillStyle = "pink";
//도형을 채우는 색 설정
ctx.fill();
//경로의 내부를 채워서 내부가 채워진 도형 그리기
</script>
</body>
</html>
|
cs |
알아둘 것!!!
Math. PI * 2 => 360도
º 라디안 각도
1rad = 180 / PI
1도 = PI /180 rad
PI = 180도
2*PI = 360도
728x90
반응형
댓글