Рисование эллипса под произвольным углом в canvas на JavaScript

[@GreatRash]

А если мы сидим на движке Хрома (собссно Chrome или Opera), то можно заюзать экспериментальную фичу:

ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);

[@Smoren]

спасибо за совет!

[@eocron]

Извините, но не до конца понял, чем Вам не понравилось параметрическое уравнение и отрисовка через какое то dt?

Почему было решено все делать через кривые безье?

[@Smoren]

Я думал и о таком варианте решения, но решил остановиться на кривых Безье, потому что раньше с ними не работал.

[@eocron]

А, хорошо ) просто это не совсем эллипс, скорее визуальная аппроксимация, так как Безье это все таки полином. Но это так, придирки к названию )

[@Smoren]

И правда. Написал функцию рисования эллипса через параметрическое уравнение. Наложил. Разница заметна. jsfiddle.net/Smoren/ztpy8pag

function drawEllipseParam(ctx, coords, sizes, angle, segments) {
    ctx.save();
    ctx.translate(coords[0], coords[1]);
    ctx.rotate(angle);
    ctx.beginPath();
    var x, y, firstTime=true;
    var dt = 1/segments;
    
    for(var t=0; t<2*Math.PI; t+=dt) {
        x = sizes[0]*Math.cos(t);
        y = sizes[1]*Math.sin(t);
        if(firstTime) {
            firstTime = false;
            ctx.moveTo(x, y);
        } else {
            ctx.lineTo(x, y);
        }
    }
    
    ctx.strokeStyle = 'blue';
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}

[@kahi4]

А можно проще:

ctx.rotate(0.3);
ctx.save();
ctx.translate(50, 50);
ctx.scale(0.75, 1);
ctx.arc(0, 0, 50, 0, Math.PI*2, false);
ctx.closePath();
ctx.stroke();
ctx.restore();
ctx.rotate(-0.3);

Demo: jsfiddle.net/2frckjxm

[@Smoren]

спасибо за вариант!

[@mospans]

В этом случае линия контура может стать слишком тонкой. Чтобы стало заметно, попробуйте использовать:

ctx.scale(0.1, 1);

[@mospans]

Для наглядности моих слов:

Слева метод kahi4 справа — Smoren,

[@Keyten]

Хм
Прочитал пост в метро, но не имел возможности написать, а сейчас уже все доступные способы описали и реализовали :). И через scale, и аппроксимацию отрезками.

Добавлю, разве что, вот эту ссылку
stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas/23184724
Это автору топа.

Теперь конкретно к вам, kahi4. Мне больше нравится вот так :).

ctx.save();
ctx.fillStyle = 'red';
ctx.translate(100, 100);
ctx.rotate(30 * Math.PI / 180);
ctx.scale(0.75, 1);
ctx.translate(-100, -100);
ctx.arc(100, 100, 50, 0, Math.PI*2, true);
ctx.fill();
ctx.restore();

[@Zenitchik]

Я в своё время пробовал. Но не сумел добиться, чтобы у меня эллипс и дуга такого же эллипса точно друг на друга накладывались (нужно было выделить более жирно часть эллиптической орбиты). В результате я плюнул и стал строить орбиты как графики функций.

[@Smoren]

Так тут можно как раз рисовать дугу эллипса средствами параметрического уравнения.

[@Zenitchik]

Я брал уравнения конических сечений в полярных координатах. Да, явно получить параметрические уравнения не сообразил.

[@kost]

[@ivan386]

артефакты

[@subzey]

Не нужно велосипедов! Всё это можно сделать встроенными средствами: jsfiddle.net/7ppu4g9x

[@Smoren]

Спасибо за метод.

[@Zenitchik]

Вот как раз этот метод мне и дал разные результаты для целого эллипса и его дуги.

[@subzey]

Как по мне, эллипс и дуга вполне достойно стыкуются: jsfiddle.net/subzey/p0pq6gr8

По границам жёлтого отрезка есть сероватые полосы, но это из-за субпиксельного рендеринга — если нарисовать две линии поверх друг друга, не попадая в пиксели, получится тот же эффект.

[@Zenitchik]

У меня была орбита толщиной один пиксель и, собственно, рабочий участок — два пикселя. Не утверждаю, что нельзя найти решение, но мне перейти к графику уравнения оказалось технически проще, потому что так уже строились гиперболы.

[@subzey]

Вас понял. Вашем случае действительно рисование по точкам весьма и весьма приемлимый подход.