캔버스 학습 노트: 간단한 경로 그리기

선분을 그리는 일반적인 단계:

moveTo(x,y)는 브러시를 지정된 좌표점(x,y)으로 이동합니다.

lineTo(x,y)는 직선을 사용하여 현재 끝점과 지정된 좌표점(x,y)을 연결합니다.

스트로크()는 현재 선 그리기 스타일에 따라 현재 또는 기존 경로를 그립니다.

직사각형 경로를 그리는 일반적인 단계:

ect(x, y, 너비, 높이) 직사각형 경로, 좌표점(x, y), 너비 높이

스트로크() 또는 채우기는 현재 스타일에 따라 경로를 그리거나 채웁니다.

위에서 언급한 스트로크Rect 또는 채우기Rect를 사용하거나 lineTo를 통해 직사각형으로 연결할 수도 있습니다.

먼저 호 그리기를 위한 API를 살펴보겠습니다.

ctx.arc(x, y, radius, startAngle, endAngle, 시계 반대 방향);

x, y 호 중심, 반경 호 반경, startAngle 시작점, endAngle 호 끝점, 반시계 방향 기본값은 시계 방향, true 반시계 방향

CSS의 모든 회전은 각도(deg)를 사용하지만, arc 함수에서 각도를 표현하는 단위는 각도가 아닌 라디안입니다. 각도 및 라디안의 JS 표현: 라디안 = (Math.PI/180) * 각도(deg).

여기서 라디안은 기본적으로 x축의 양의 방향과 시계 방향 회전 각도를 기준으로 계산됩니다.

삽화:

(사막에서 찍은 사진)

 ctx.beginPath();ctx.arc(200, 100, 100, 0, Math.PI / 2, false);ctx.closePath();ctx.Stroke();ctx.fill();

위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.