자바스크립트 Canvas에 백그라운드 배경을 추가하는 방법

Last Modified : 2023-10-15 / Created : 2020-12-22

7,576
View Count

주소 복사하기

자바스크립트를 사용하여 canvas(캔버스) 영역 전체에 원하는 배경색(백그라운드색)을 적용하려고 합니다. 어떻게하면 될지 방법을 알아봅니다.

# 캔버스(Canvas)에 배경색 칠하기

canvas에 배경색(전경색)을 어떻게 적용하면 될까요? 가장 많이 쓰이는 방법으로 캔버스와 동일한 크기의 원하는 색상의 사각형을 그리는 방법이 사용됩니다. 즉 캔버스 위에 색을 칠하는 것과 동일하게 구현할 수 있죠.

구현 과정은 아래와 같습니다.

1. 새로운 캔버스를 만들고 컨텍스트를 생성한다.
2. 컨텍스트 내부에 원하는 색의 fillStyle 값을 설정한다.
3. 캔버스와 동일한 크기로 fillRect()를 사용하여 그린다.

매우 간단하죠 그럼 아래에서 간단한 예제를 만들어 적용해봅니다.

! 캔버스(canvas) 배경색 예제보기

아래는 캔버스를 하나를 생성하고 위에 캔버스 전체 크기의 녹색 사각형을 그려 배경색으로 사용한 예제입니다.

@ canvas.html

@ canvas.js

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

// 채울 스타일을 적용
ctx.fillStyle = '#0f0';

// 캔버스 크기의 사각형으로 채우기
ctx.fillRect(0, 0, canvas.width, canvas.height);

코드는 매우 간단합니다.여기서 canvas 영역의 width, height 값을 가져오기 위해서 canvas.width, canvas.height를 사용하였습니다.

이제 실제로 구현하면 아래와 같이 나타나게 됩니다.

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
!(() => {
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, canvas.width, canvas.height);
})();
</script>

예상대로 녹색의 캔버스가 간단하게 만들어졌습니다 ~ 이와 같이 캔버스 위에 새로운 색을 칠하는 것처럼 동일한 크기의 색을 가진 사각형을 그리면 전체 캔버스에 배경색을 칠한 것처럼 구현할 수 있습니다.

여기까지 캔버스 영역에 배경색을 만드는 법을 알아보았습니다.

아래의 글도 찾고 계시지 않나요?

자바스크립트 정규표현식, div 태그 제거하거나 br태그로 바꾸는 방법

자바스크립트 배열값 중에서 최대값 최소값 찾는 방법