728x90
반응형
사용방법 | 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(타겟);
728x90
반응형
'크래프톤 정글 - TIL' 카테고리의 다른 글
크래프톤 정글 5기 TIL - 나만의 무기 만들기 3(WebRTC) (0) | 2024.07.03 |
---|---|
크래프톤 정글 5기 TIL - 나만의 무기 만들기 2(카카오 Oauth, Canvas) (0) | 2024.07.02 |
크래프톤 정글 5기 TIL - Day 97(CS 면접 복습) (0) | 2024.06.27 |
크래프톤 정글 5기 TIL - Day 96(CS 면접 복습) (0) | 2024.06.25 |
크래프톤 정글 5기 TIL - Day 84 ~ 95(실력 다지기) (0) | 2024.06.14 |