HTML5 캔버스에는 타원을 직접 그리는 전용 메서드가 기본적으로 제공되지 않기 때문에, 원을 그린 뒤 좌표계를 변형하는 방식으로 타원을 만들 수 있습니다. 핵심 아이디어는 translate()로 캔버스 중앙으로 원점을 이동하고, scale()로 가로 또는 세로 비율을 늘려서 원을 타원처럼 보이게 만드는 것입니다.
예제 코드
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id="newCanvas" width="450" height="300"></canvas>
<script>
// 캔버스 요소 가져오기
var c = document.getElementById('newCanvas');
var context = c.getContext('2d');
var cX = 0;
var cY = 0;
var radius = 40;
// 현재 상태 저장
context.save();
// 캔버스 중앙으로 좌표계 이동
context.translate(c.width / 2, c.height / 2);
// 가로 방향으로 2배 확대하여 타원 형태로 변형
context.scale(2, 1);
// 원 그리기 시작
context.beginPath();
context.arc(cX, cY, radius, 0, 2 * Math.PI, false);
// 상태 복원
context.restore();
// 채우기 및 테두리 스타일 지정
context.fillStyle = '#000000';
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'yellow';
context.stroke();
</script>
</body>
</html>코드 설명
- save() / restore():
scale()과 같은 좌표계 변형이 다른 그리기 작업에 영향을 주지 않도록 상태를 저장하고 복원합니다. - translate(x, y): 원점을 캔버스의 정중앙으로 이동시켜 타원이 화면 가운데에 위치하도록 합니다.
- scale(2, 1): x축 방향으로 2배 늘리고 y축은 그대로 유지하여, 반지름 40px인 원이 가로로 긴 타원으로 표현됩니다.
- arc(): 실제로는 완전한 원을 그리지만, 스케일 변형 덕분에 화면에는 타원으로 나타납니다.
출력 결과
위 코드를 실행하면 노란색 테두리를 가진 검정색 타원이 캔버스 중앙에 그려집니다.
참고: ellipse() 메서드
최신 브라우저에서는 context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle) 메서드를 사용하면 좌표계 변형 없이도 타원을 더 간단하게 그릴 수 있습니다. 다만 위의 scale 방식은 구형 브라우저와의 호환성이 필요한 경우에 여전히 유용합니다.