HTML Canvas 원

예제

귀하의 브라우저는 HTML5 캔버스 태그를 지원하지 않습니다.
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

자신의 손으로 해보세요

원 그리기

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

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

arc(x,y,r,start,end) - 곡선(캔버스)을 생성합니다.

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

x와 y 매개변수는 원의 중심 좌표를 정의합니다.

r 매개변수는 원의 반지름을 정의합니다.

다른 참조:

CodeW3C.com의 완전한 Canvas 참조 가이드