HTML 캔버스 좌표

캔버스 좌표

표시되는 HTML 캔버스는 2 차원 격자이다.

캔버스의 왼쪽 위 모서리는 좌표가 (0,0)

: 이전 장에서는 사용이 방법 본 fillRect(0,0,150,75) .

이것은 의미 : 왼쪽 위 모서리에서 시작 (0,0) 및 150x75 픽셀의 사각형을 그립니다.

마우스 사각형을 통해 아래의 x 및 y 좌표를 보려면 :

엑스

와이

캔버스에 직선을 그리려면 다음 방법을 사용하십시오

실제로 선을 그리려면 중 하나를 사용합니다 "ink" 와 같은 방법, 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() : 세트 * Math.PI로 2 0 각도와 끝 각도를 시작합니다. 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();