HTML Canvas 좌표
- 이전 페이지 Canvas 그리기
- 다음 페이지 Canvas 선
화면 좌표
HTML 화면은 二차원의 그리드입니다.
화면의 왼쪽 상단 좌표는 (0,0)입니다.
이전 장에서는 fillRect(0,0,150,75) 메서드를 사용했습니다.
의미는: 왼쪽 상단 (0,0)에서 150x75 픽셀의 사각형을 그립니다.
좌표 예제
아래의 사각형에 마우스를 올려다가 x와 y 좌표를 확인할 수 있습니다:
X
Y
선 그리기
화면에 직선을 그리려면 다음 메서드를 사용하십시오:
- moveTo(x,y) - 선의 시작점 정의
- lineTo(x,y) - 선의 종점 정의
실제로 선을 그리려면 '화질' 메서드 중 하나를 사용해야 합니다. 예를 들어, stroke().
예제
위치 (0,0)에서 시작점을 정의하고, 위치 (200,100)에서 종점을 정의합니다. 그런 다음 stroke() 메서드를 사용하여 실제로 선을 그립니다:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
원 그리기
화면에 원을 그리려면 다음 메서드를 사용하십시오:
- beginPath() - 경로 시작
- arc(x,y,r,startangle,endangle) - 원곡선/곡선 생성
arc()를 사용하여 원을 생성하려면 다음과 같이 설정하십시오: 시작 각도를 0으로 설정하고, 종료 각도를 2 * Math.PI로 설정합니다. x와 y 매개변수는 원의 중심의 x와 y 좌표를 정의합니다. r 매개변수는 원의 반지름을 정의합니다.
예제
사용자가 arc() 메서드로 원을 정의한 후 stroke() 메서드를 사용하여 원을 실제로 그립니다:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
다른 참조:
- 이전 페이지 Canvas 그리기
- 다음 페이지 Canvas 선
