# 이미지를 반복 패턴으로 채우기 방법
1. 이미지 객채 생성
const img = new Image();
2. 이미지 소스 설정
img.src = '이미지 경로';
3. 패턴 객체 생성
const pattern = ctx.createPattern(img, 'repeat');
* repeat: 이미지 패턴 반복
* repeat-x: x축 반복
* repeat-y: y축 반복
* no-repeat: 반복 안함
4. 패턴 적용
ctx.fillStyle = pattern;
* fillStyle 적용 후, ctx.fillRect(x좌표, y좌표, 길이, 높이); 처럼 색을 채우면 패턴이 적용된다.
참고) 상황에 따라, 이미지 로드가 완료된 후 적용하는 것이 안전하다.
img.onload = function(){
const pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(x좌표, y좌표, 길이, 높이);
}
# 샘플 예제 코드
반복되는 이미지로 패턴을 만들어 사각형을 그리는 예제
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- HTML -->
<!-- 1. canvas 엘리먼트를 선언한다: id, widht, height를 태그 내에서 지정해준다. -->
<canvas id="myCanvas" width="400" height="300"></canvas>
<!-- Javascript -->
<script>
// 1. canvas 엘리먼트를 취득한다.
const canvas = document.getElementById('myCanvas');
// 2. 2d모드의 그리기 객체를 취득한다. => 이 객체를 통해 canvas에 그림을 그릴 수 있다.
const ctx = canvas.getContext("2d");
// 3. 이미지 객체 생성
const img = new Image();
// 4. 이미지 소스 설정
img.src = '../img/img_patrn.png';
// 5. 이미지 로드이벤트- 콜백함수 등록
img.onload = function(){
// 1) 패턴 생성
const pattern = ctx.createPattern(img, 'repeat');
// 2) 채우기 색을 패턴으로 설정
ctx.fillStyle = pattern;
// 3) 사각형 그리기
ctx.fillRect(0, 0, canvas.width, canvas.height); // 캔버스의 너비, 높이를 꽉채우는 사각형
}
</script>
</body>
</html><결과물>
캔버스 기초는 아래 글 참고
HTML Canvas(캔버스) 기초: 기본 사용 방법 & 샘플 예제 코드
'개발(Development) > HTML Canvas(캔버스)' 카테고리의 다른 글
| HTML Canvas(캔버스) 애니메이션 구현 방법 기초 (0) | 2021.06.04 |
|---|---|
| HTML Canvas(캔버스) 텍스트 그리기 방법: fillText, strokeText (0) | 2021.06.04 |
| HTML Canvas(캔버스): 이미지 그리기 방법 drawImage (0) | 2021.06.04 |
| HTML Canvas(캔버스): 그라데이션 gradient 색 설정 방법 (0) | 2021.06.03 |
| HTML Canvas(캔버스): 원 circle 그리기 방법 (0) | 2021.06.03 |
댓글