HTML Canvas(캔버스): 이미지 그리기 방법 drawImage
# 캔버스에 이미지 띄우는 방법 1. 이미지 객체 생성 const img = new Image(); 2. 이미지 소스 설정 img.src = '이미지 경로'; 3. 이미지 그리기 ctx.drawImage(img, x좌표, y좌표, 너비, 높이); * 너비/높이는 옵션이며, 생략시 원본 크기대로 이미지를 띄운다. 참고) 아래와 같이 이미지 로드가 완료된 후에 그리도록 설정하는게 안전하다. img.onload = function(){ ctx.drawImage(img, x좌표, y좌표, 너비, 높이) } 참고) sprite 이미지 사용시, 이미지 자르기 옵션을 추가 적용한다. ctx.drawImage(img, sx, sy, swidth, sheight, x, y, width, height); * 스프라이트 이..
2021. 6. 4.
HTML Canvas(캔버스): 그라데이션 gradient 색 설정 방법
캔버스 기초는 아래 글 참고 HTML Canvas(캔버스) 기초: 기본 사용 방법 & 샘플 예제 코드 # canvas 그라데이션: 방법 정리 1. 그라데이션 객체 생성 1)선형: 그리기객체.createLinearGradient(시작 X좌표, 시작 Y좌표, 끝 X좌표, 끝 Y좌표) 2)방사형: 그리기객체.createRadialGradient(시작 X좌표, 시작 Y좌표, 시작 반지름, 끝 X좌표, 끝 Y좌표, 끝 반지름) 2. 그라데이션 위치, 색상 지정 : 그라데이션객체.addColorStop(위치, 색상) * 위치는 0(시작)~1(끝) 사이의 값으로 설정 3. 그리기 객체의 색상으로 그라데이션 설정 : 그리기객체.fillStyle = 그라데이션객체; # canvas 그라데이션: 샘플 예제 코드 선형 그라..
2021. 6. 3.
