본문 바로가기
카테고리 없음

Canvas 사용법

by riversun1 2024. 8. 9.

 

 

 

오늘 canvas에 대해서 듣게 되었다.

수료생들이 볼 수도 있는 블로그라

자세한 내용은 아직 말할 수 없지만.

 

canvas에 관한 내용을 정리해보려한다!

 

내 깃허브에 있는 gitanimals도 canvas로 만든거라는 사실을 알게되었다...⭐

개발자라면 이런 것들도 뜯어볼 생각을 해야할 것...👀

 

 

 

Canvas 기본 사용법

Canvas는 HTML5에서 제공하는 그래픽을 그릴 수 있는 강력한 도구이다.

웹 애플리케이션에서 2D 및 3D 그래픽을 생성하는 데 사용되며, 게임, 데이터 시각화, 애니메이션 등에 활용된다.

 

1. Canvas 요소 추가하기

HTML 문서에 Canvas를 추가하기 위해 <canvas> 태그를 사용한다. 아래는 기본적인 Canvas 요소의 예시이다.

<canvas id="myCanvas" width="500" height="400"></canvas>

id 속성을 통해 JavaScript에서 해당 Canvas를 쉽게 참조할 수 있다. width와 height 속성은 Canvas의 크기를 설정한다.

 

2. JavaScript로 Canvas 접근하기

Canvas에 접근하기 위해 JavaScript의 getContext 메서드를 사용한다. 이 메서드는 2D 또는 3D 렌더링 컨텍스트를 반환한다. 기본적으로 2D 컨텍스트를 사용하는 방법은 다음과 같다.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

 

 

3. 기본 도형 그리기

Canvas에서 도형을 그리기 위해 다양한 메서드를 사용할 수 있다. 예를 들어, 사각형, 원, 선 등을 그릴 수 있다.

사각형 그리기

ctx.fillStyle = 'blue'; // 색상 설정
ctx.fillRect(20, 20, 150, 100); // 사각형 그리기

 

 

원 그리기

ctx.beginPath(); // 새로운 경로 시작
ctx.arc(240, 150, 70, 0, Math.PI * 2, false); // 원 그리기
ctx.fillStyle = 'red';
ctx.fill();

 

선 그리기

ctx.moveTo(0, 0); // 시작점 설정
ctx.lineTo(200, 100); // 끝점 설정
ctx.strokeStyle = 'green'; // 선 색상 설정
ctx.stroke(); // 선 그리기

 

 

4. 텍스트 추가하기

Canvas에 텍스트를 추가할 수도 있다. 다음은 텍스트를 그리는 방법이다.

ctx.font = '30px Arial'; // 글꼴 설정
ctx.fillStyle = 'black'; // 글자 색상 설정
ctx.fillText('Hello, Canvas!', 50, 50); // 텍스트 그리기

 

 

5. 애니메이션 만들기

Canvas에서는 애니메이션을 매우 쉽게 만들 수 있다. requestAnimationFrame 메서드를 사용하여 애니메이션을 구현할 수 있다.

let x = 0;

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 이전 프레임 지우기
    ctx.fillStyle = 'blue';
    ctx.fillRect(x, 20, 150, 100); // 사각형 그리기
    x += 2; // x 좌표 증가

    requestAnimationFrame(animate); // 다음 프레임 요청
}

animate(); // 애니메이션 시작

 

 

결론

Canvas는 강력한 그래픽 도구로, 다양한 애플리케이션에서 활용될 수 있다.

사용법을 잘 익히면, 더 복잡한 애니메이션이나 인터랙티브한 그래픽을 구현하는 데 큰 도움이 된다!

티스토리툴바