캔버스 기초는 아래 글 참고
HTML Canvas(캔버스) 기초: 기본 사용 방법 & 샘플 예제 코드
# canvas 그라데이션: 방법 정리
1. 그라데이션 객체 생성
1)선형: 그리기객체.createLinearGradient(시작 X좌표, 시작 Y좌표, 끝 X좌표, 끝 Y좌표)
2)방사형: 그리기객체.createRadialGradient(시작 X좌표, 시작 Y좌표, 시작 반지름, 끝 X좌표, 끝 Y좌표, 끝 반지름)
2. 그라데이션 위치, 색상 지정
: 그라데이션객체.addColorStop(위치, 색상)
* 위치는 0(시작)~1(끝) 사이의 값으로 설정
3. 그리기 객체의 색상으로 그라데이션 설정
: 그리기객체.fillStyle = 그라데이션객체;
# canvas 그라데이션: 샘플 예제 코드
선형 그라데이션을 적용한 사각형을 그리는 예제이다.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- HTML -->
<!-- 1. canvas 엘리먼트 선언 -->
<canvas id="myCanvas" width="400" height="300"></canvas>
<!-- Javascript -->
<script>
// 1. canvas 엘리먼트 취득
const canvas = document.getElementById('myCanvas');
// 2. 2d모드의 그리기 객체 취득
const ctx = canvas.getContext("2d");
// 3. 선형 그라데이션 객체 생성
const grd = ctx.createLinearGradient(0, 0, 350, 0);
// 4. 그라데이션 위치, 색상 추가
grd.addColorStop(0, 'blue');
grd.addColorStop(0.5, 'red');
grd.addColorStop(1, 'green');
// 5. 그리기 객체의 색상을 '그라데이션 객체' 로 지정
ctx.fillStyle = grd;
// 6. 사각형 그리기
ctx.fillRect(0, 0, 350, 200);
</script>
</body>
</html><결과물>
'개발(Development) > HTML Canvas(캔버스)' 카테고리의 다른 글
| HTML Canvas(캔버스) 패턴 이미지 채우기 적용 방법: createPattern (0) | 2021.06.04 |
|---|---|
| HTML Canvas(캔버스): 이미지 그리기 방법 drawImage (0) | 2021.06.04 |
| HTML Canvas(캔버스): 원 circle 그리기 방법 (0) | 2021.06.03 |
| HTML Canvas(캔버스): 사각형 그리기 방법 (0) | 2021.06.03 |
| HTML Canvas(캔버스) 선 그리기 방법 총정리: 7가지 샘플 예제 코드 (0) | 2021.06.01 |
댓글