HTML Canvas 곡선

实例

您的浏览器不支持HTML5 canvas标签。
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 50, 50, 0, Math.PI);
ctx.stroke();

직접 시도해 보세요

arc() 메서드

곡선은 원의 일부이며, 중심점 좌표와 반지름으로 정의됩니다:

애크 앵글

Canvas 곡선 그리기

화면의 경로를 사용하여 원을 그리십시오:

메서드 설명 그리기
beginPath() 경로 시작 No
arc() 곡선 정의 No
stroke() 그래픽. Yes

화면에 원을 그리기 위해 다음 메서드를 사용하십시오:

  • beginPath() - 경로 시작
  • arc(x,y,r,start,end) - 원 정의
  • stroke() - 그리기

arc(x,y,r,start,end) - 곡선(끝)

원을 만들기 위해, 시작 각도를 0으로 설정하고, 종료 각도를 2 * Math.PI로 설정하십시오.

x와 y 파라미터는 원심의 좌표를 정의합니다.

r 파라미터는 원의 반지름을 정의합니다.

다른 참고 사항:

CodeW3C.com의 완전한 Canvas 참고 매뉴얼