Комментарии 23
А если мы сидим на движке Хрома (собссно Chrome или Opera), то можно заюзать экспериментальную фичу:
ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
Извините, но не до конца понял, чем Вам не понравилось параметрическое уравнение и отрисовка через какое то dt?
Почему было решено все делать через кривые безье?
Почему было решено все делать через кривые безье?
Я думал и о таком варианте решения, но решил остановиться на кривых Безье, потому что раньше с ними не работал.
А, хорошо ) просто это не совсем эллипс, скорее визуальная аппроксимация, так как Безье это все таки полином. Но это так, придирки к названию )
НЛО прилетело и опубликовало эту надпись здесь
И правда. Написал функцию рисования эллипса через параметрическое уравнение. Наложил. Разница заметна. 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();
}
А можно проще:
Demo: jsfiddle.net/2frckjxm
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
спасибо за вариант!
В этом случае линия контура может стать слишком тонкой. Чтобы стало заметно, попробуйте использовать:
ctx.scale(0.1, 1);
Хм
Прочитал пост в метро, но не имел возможности написать, а сейчас уже все доступные способы описали и реализовали :). И через scale, и аппроксимацию отрезками.
Добавлю, разве что, вот эту ссылку
stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas/23184724
Это автору топа.
Теперь конкретно к вам, kahi4. Мне больше нравится вот так :).
Прочитал пост в метро, но не имел возможности написать, а сейчас уже все доступные способы описали и реализовали :). И через 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();
Я в своё время пробовал. Но не сумел добиться, чтобы у меня эллипс и дуга такого же эллипса точно друг на друга накладывались (нужно было выделить более жирно часть эллиптической орбиты). В результате я плюнул и стал строить орбиты как графики функций.
Не нужно велосипедов! Всё это можно сделать встроенными средствами: jsfiddle.net/7ppu4g9x
Спасибо за метод.
Вот как раз этот метод мне и дал разные результаты для целого эллипса и его дуги.
Как по мне, эллипс и дуга вполне достойно стыкуются: jsfiddle.net/subzey/p0pq6gr8
По границам жёлтого отрезка есть сероватые полосы, но это из-за субпиксельного рендеринга — если нарисовать две линии поверх друг друга, не попадая в пиксели, получится тот же эффект.
По границам жёлтого отрезка есть сероватые полосы, но это из-за субпиксельного рендеринга — если нарисовать две линии поверх друг друга, не попадая в пиксели, получится тот же эффект.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Рисование эллипса под произвольным углом в canvas на JavaScript