HTML5 Canvas_html5 튜토리얼 팁에서 타원을 그리는 4가지 방법

//------------타원을 그리는 균일한 압축 방법---------
//The method 원호법은 원을 그리는 데 사용되며
의 스케일과 결합됩니다. //가로 또는 세로 축 방향의 스케일(균일 압축)
//이 방법으로 그리는 타원의 가장자리는 두꺼울수록 두꺼워집니다. 장축의 끝부분에 가까울수록 장축 끝점의 선 너비는 정상 값입니다
//가장자리가 단축에 가까울수록 타원은 더 평평하고 얇아지며 균일해집니다. 이것이 스케일의 결과입니다
//이러한 단점은 고리(행성 후광)의 3차원 효과를 표현할 때
//매개변수 a의 경우와 같이 때로는 장점이 됩니다. 또는 b가 0이면 이 방법을 적용할 수 없습니다
function EvenCompEllipse(context, x, y, a, b)
{
context.save();
//a와 a 중 더 큰 것을 선택합니다. b를 원호 방법의 반경 매개변수로 사용
var r = (a > b) ? a : b
var ratioX = a / r; //가로 축 배율 비율
var ratioY = b; r; //세로축 배율
context.scale(ratioX, ratioY); //배율(균일 압축)
context.beginPath();
//타원의 왼쪽 끝점에서 시계 반대 방향으로 그립니다.
context.moveTo((x a) / ratioX, y / ratioY);
context.arc(x / ratioX , y / ratioY, r, 0, 2 * Math.PI);
context.closePath ();
context.Stroke();
context.restore();
};

context.save();
context.translate(x, y);
context.beginPath();
//타원의 세로축 하단부터 시계 반대 방향으로 그립니다.
context .moveTo(0, b);
context.bezierCurveTo(ox, b, a, oy, a, 0);
context.bezierCurveTo(a, -oy, ox, -b, 0 , -b) ;
context.bezierCurveTo(-ox, -b, -a, -oy, -a, 0);
context.bezierCurveTo(-a, oy, -ox, b, 0, b );
context.closePath();
context.Stroke();
context.restore();

};

ctx.beginPath();
//타원의 왼쪽 끝점에서 시작하여 시계 방향으로 4개의 3차 베지어 곡선을 그립니다.
ctx.moveTo(x - a, y);
ctx.bezierCurveTo ( x - a, y - oy, x - ox, y - b, x, y - b);
ctx.bezierCurveTo(x ox, y - b, x a, y - oy, x a, y);
ctx.bezierCurveTo(x a, y oy, x ox, y b, x, y b);
ctx.bezierCurveTo(x - ox, y b, x - a, y oy, x - a, y);
ctx.closePath();
ctx.Stroke();
};