aktualizacje:
- metoda skalowania może wpłynąć na wygląd szerokości obrysu
- dobrze wykonana metoda skalowania może zachować niezmienioną szerokość obrysu
- Canvas ma metodę elipsy, którą obsługuje teraz Chrome
- dodano zaktualizowane testy do JSBin
Przykład testowania JSBin (zaktualizowany, aby przetestować odpowiedzi innych w celu porównania)
- Bezier - rysowanie oparte na lewym górnym rogu, zawierające prostokąt i szerokość / wysokość
- Bezier with Center - rysowanie na podstawie środka i szerokości / wysokości
- Łuki i skalowanie - rysuj w oparciu o rysowanie okręgu i skalowanie
- Krzywe kwadratowe - rysuj za pomocą kwadratów
- test wydaje się nie rysować tak samo, może być implementacją
- zobacz odpowiedź oyophant
- Canvas Ellipse - przy użyciu standardowej metody ellipse () W3C
- test wydaje się nie rysować tak samo, może być implementacją
- zobacz odpowiedź Loktara
Oryginalny:
Jeśli chcesz symetrycznego owalu, zawsze możesz utworzyć okrąg o promieniu szerokości, a następnie przeskalować go do żądanej wysokości ( edycja: zauważ, że wpłynie to na wygląd szerokości obrysu - zobacz odpowiedź acdameli), ale jeśli chcesz mieć pełną kontrolę nad elipsą oto jeden ze sposobów wykorzystania krzywych Beziera.
<canvas id="thecanvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById('thecanvas');
if(canvas.getContext)
{
var ctx = canvas.getContext('2d');
drawEllipse(ctx, 10, 10, 100, 60);
drawEllipseByCenter(ctx, 60,40,20,10);
}
function drawEllipseByCenter(ctx, cx, cy, w, h) {
drawEllipse(ctx, cx - w/2.0, cy - h/2.0, w, h);
}
function drawEllipse(ctx, x, y, w, h) {
var kappa = .5522848,
ox = (w / 2) * kappa,
oy = (h / 2) * kappa,
xe = x + w,
ye = y + h,
xm = x + w / 2,
ym = y + h / 2;
ctx.beginPath();
ctx.moveTo(x, ym);
ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
ctx.stroke();
}
</script>