크래프톤 정글 - 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(타겟);