HTML <canvas> 태그는 웹 페이지에 그래픽 및 기타 시각적 요소를 그리는 데 사용됩니다. 이 태그는 개발자가 JavaScript 를 사용하여 게임, 이미지 및 애니메이션을 만들 수 있는 플랫폼을 제공합니다. canvas 요소는 canvas 의 크기, 불투명도 및 모양을 조작할 수 있는 다양한 속성을 제공합니다.
이 Lab 에서는 HTML 에서 <canvas> 태그를 사용하여 그래픽을 만들고, 애니메이션을 추가하며, JavaScript 를 사용하여 도형과 텍스트를 조작하는 방법을 살펴봅니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 을 작성하는 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
내용 없이 <canvas> 태그를 사용하여 간단한 canvas 를 만들어 보겠습니다. index.html 파일에 다음 코드를 작성하십시오.
<!doctype html>
<html>
<head>
<title>Simple Canvas</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>파일을 저장하고 브라우저에서 엽니다. 페이지에 빈 영역이 표시되는데, 이는 기본 너비가 300px 이고 높이가 150px 인 canvas 입니다.
style 속성을 사용하여 canvas 에 스타일을 추가할 수 있습니다. canvas 의 경계를 보이도록 하기 위해 테두리를 추가해 보겠습니다.
<!doctype html>
<html>
<head>
<title>Styled Canvas</title>
</head>
<body>
<canvas id="myCanvas" style="border: 1px solid black;"></canvas>
</body>
</html>파일을 저장하고 브라우저를 새로 고쳐 결과를 확인하십시오.
이제 canvas 에 몇 가지 그래픽을 추가해 보겠습니다. 이를 위해 JavaScript 를 사용해야 합니다. getContext() 메서드를 사용하여 canvas 의 2D 드로잉 컨텍스트 (drawing context) 를 가져와 다양한 작업을 수행할 수 있습니다.
<!doctype html>
<html>
<head>
<title>Shapes on Canvas</title>
</head>
<body>
<canvas id="myCanvas" style="border: 1px solid black;"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Draw a rectangle
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 50);
</script>
</body>
</html>위 코드에서 먼저 ID myCanvas로 canvas 요소를 가져온 다음, getContext()를 사용하여 2D 드로잉 컨텍스트를 가져옵니다. 그런 다음 fillStyle 속성을 "red"로 설정하여 사각형을 빨간색으로 채웁니다. 마지막으로 fillRect() 메서드를 사용하여 사각형을 그립니다.
파일을 저장하고 브라우저를 새로 고쳐 결과를 확인하십시오.
JavaScript 를 사용하여 canvas 에 텍스트를 추가해 보겠습니다.
<!doctype html>
<html>
<head>
<title>Text on Canvas</title>
</head>
<body>
<canvas id="myCanvas" style="border: 1px solid black;"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Add text
ctx.font = "30px Arial";
ctx.fillStyle = "blue";
ctx.fillText("Hello World", 50, 100);
</script>
</body>
</html>위 코드에서 먼저 ID myCanvas로 canvas 요소를 가져온 다음, getContext()를 사용하여 2D 드로잉 컨텍스트를 가져옵니다. 그런 다음 font 속성을 "30px Arial"로, fillStyle 속성을 "blue"로 설정합니다. 마지막으로 fillText() 메서드를 사용하여 "Hello World" 텍스트를 추가합니다.
파일을 저장하고 브라우저를 새로 고쳐 결과를 확인하십시오.
JavaScript 와 HTML <canvas> 태그를 사용하여 canvas 에서 애니메이션을 만들 수도 있습니다. canvas 에 움직이는 사각형 애니메이션을 만들어 보겠습니다.
<!doctype html>
<html>
<head>
<title>Animated Canvas</title>
</head>
<body>
<canvas id="myCanvas" style="border: 1px solid black;"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
let x = 20;
let y = 20;
const dx = 5;
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "red";
ctx.fillRect(x, y, 50, 50);
if (x + 50 > canvas.width || x < 0) {
dx = -dx;
}
x += dx;
}
animate();
</script>
</body>
</html>위 코드에서 먼저 ID myCanvas로 canvas 요소를 가져온 다음, getContext()를 사용하여 2D 드로잉 컨텍스트를 가져옵니다. 그런 다음 사각형의 위치를 저장하기 위해 x와 y 변수를 선언합니다. 또한 사각형을 x 축을 따라 이동시키기 위해 dx 변수를 선언합니다.
그런 다음 화면에 사각형을 그리는 animate() 함수를 만듭니다. 각 프레임마다 canvas 의 이전 그림을 지우기 위해 clearRect() 메서드를 사용합니다. 그런 다음 fillRect() 메서드를 사용하여 사각형을 빨간색으로 채웁니다.
그런 다음 사각형이 canvas 의 경계에 도달했는지 확인하고, 그렇다면 dx의 값을 변경하여 이동 방향을 변경합니다.
마지막으로, 애니메이션 루프를 만들기 위해 requestAnimationFrame() 메서드를 호출합니다.
파일을 저장하고 브라우저를 새로 고쳐 애니메이션 사각형을 확인하십시오.
이 랩에서는 HTML <canvas> 태그를 사용하여 웹 페이지에서 그래픽과 애니메이션을 만드는 방법을 배웠습니다. 또한 속성 (attribute) 과 스타일을 사용하여 canvas 의 크기, 불투명도 및 모양을 조작하는 방법도 배웠습니다. JavaScript 와 getContext() 메서드를 사용하여 canvas 에 도형, 텍스트 및 애니메이션을 추가했습니다.
