[JS] 자바스크립트 캔버스 단색, 그라데이션 배경 그리기

 

캔버스 단색 배경 그리기

---

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#f7e017'; // 1. 배경색 지정
ctx.fillRect(0, 0, width, height); 2. 설정한 위치에 설정한 크기만큼 그리기
           //(시작점, 끝점, 너비, 높이)

 

 

캔버스 그라데이션 배경 그리기

---

// canvas 선언
const canvas = document.querySelector('#canvas');

// 2D canvas 그리기
const ctx = canvas.getContext('2d');

// 선형 그라데이션 객체 생성
const gradient = ctx.createLinearGradient(0,0,0,100); //그라데이션 방향 (X0, Y0, X1, Y1)

// 그라데이션 색 추가
gradient.addColorStop(0, '#FEE3EC');
gradient.addColorStop(1, '#B983FF');
//gradient.addColorStop(2, '#000');

				...

ctx.fillStyle=gradient; // 그라데이션 적용
ctx.fillRect(0, 0, 100, 100); //캔버스에 그리기

 

 

캔버스 이미지 그리기

---

// canvas 선언
const canvas = document.querySelector('#canvas');

// 2D canvas 그리기
const ctx = canvasEl.current.getContext('2d');

// 이미지 그리기  (이미지 객체, X축 시작 위치, Y축 시작 위치, 가로 길이, 세로 길이)
ctx.drawImage(image, 0, 0, width, height);