HTML 캔버스 좌표
캔버스 좌표
HTML 캔버스는 2차원 그리드입니다.
캔버스의 왼쪽 상단 모서리에는 좌표가 (0,0) 있습니다.
이전 장에서 이 메서드가 사용된 것을 보았습니다: fillRect(0,0,150,75).
즉, 왼쪽 위 모서리(0,0)에서 시작하여 150x75픽셀의 직사각형을 그립니다.
좌표 예
x 및 y 좌표를 보려면 아래 사각형 위로 마우스를 가져갑니다.
엑스
와이
선을 그리다
캔버스에 직선을 그리려면 다음 방법을 사용하십시오.
- moveTo( x,y ) - 선의 시작점을 정의합니다.
- lineTo( x,y ) - 선의 끝점을 정의합니다.
실제로 선을 그리려면 stroke()와 같은 "잉크" 메서드 중 하나를 사용해야 합니다.
예시
위치(0,0)에서 시작점을 정의하고 위치(200,100)에서 끝점을 정의합니다. 그런 다음 실제로 선을 그리기 위해 stroke() 메서드를 사용합니다.
var canvas = document.getElementById("myCanvas");
var 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() 메서드를 사용하여 실제로 원을 그립니다.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();