크래프톤 정글 - TIL

크래프톤 정글 5기 TIL - 나만의 무기 만들기 1(Canvas API)

개발찾아 삼만리 2024. 7. 2. 00:01
사용방법 1. html 파일에 <canvas></canvas>로 선언
2. css로 너비(width), 높이(height) 설정
3. 나머지는 Javascript에서 처리
    - context(ctx)은 canvas에서 붓 역할(2d, webGL)
    - canvas의 사이즈를 설정(css와 동일하게)

기본적인 함수

// 사각형(fill 또는 stroke를 하기 전에는 보이지 않음)
rect(x좌표, y좌표, 너비, 높이);

// 색이 채워진 사각형
fillRect(x좌표, y좌표, 너비, 높이);

// 색을 채움
fill();

// 선을 그림
stroke();

// 새로운 경로 시작(이전 경로와 별개의 경로로 나뉨 / 스타일 등이 다르게 각각 적용)
beginPath();

// 채우기, 선 색상 변경
fillStyle = "색상";
strokeStyle = "색상";

// 시작지점 지정
moveTo(x좌표, y좌표);

// 목표지점까지 이동하면 선 그리기(fill 또는 stroke를 하기 전에는 보이지 않음)
lineTo(x좌표, y좌표);

// 원형 그리기(fill 또는 stroke를 하기 전에는 보이지 않음)
// 원 시작지점은 오른쪽이고 (2 * Math.PI)가 완벽한 원임
arc(x좌표, y좌표, 반지름, 원 시작지점, 원 종료지점);

// 선 두께 조정
lineWidth = 두께;

// 데이터 구조 확인(data-"타입" : dataset에 저장)
console.dir(타겟);