Как сделать утончение линии в canvas?

Question

[Umid]

Добрый вечер.
Как можно добиться имитации линии в трехмерном пространстве.
Т.е. что бы сначала линия была более широкой, а чем дальше, тем тоньше.

В голову пришла идея написать уравнение прямой при помощи 2 точек(начало и конец линии), получить координаты всех точек в промежутке от y1 до y2, и отрисовать круг в полученных точках, уменьшая радиус на определённое число.

Но может есть более легкий способ?

Comments

[Ди Ма]

Изображение динамическое?

[Umid]

Ди Ма: Да.

[Ди Ма]

Umid: Тогда окружностями нельзя. Огромное количество точек получается. На пересчет уйдет много ресурсов. Как и ответил Виталий Столяров- многоугольник проще. По количеству точек выигрыш очевиден.

Answer 1

[Vitaliy]

Проще многоугольник по нужным координатам рисовать

Answer 2

[GreatRash]

1) Если вам понадобилась имитация 3D, то возможно вам и нужно 3D (WebGL)?
2) https://projects.mariusgundersen.net/OnGameStart/#1

Comments

[Umid]

Очень круто. Спасибо.
А в чем разница?
В смысле context 2d большим кол-вом браузеров поддерживается нежели WebGL?

[GreatRash]

Umid: WebGL использует ресурсы видеокарты, context 2d использует процессор. Так что WebGL будет намного быстрее. Особенно если у вас анимация планируется. Ну и заюзать готовый three.js будет сильно проще, чем писать, по сути, свой 3d-движок.

Конечно статью по ссылке всё равно прочитать рекомендую, для понимания того как в принципе такие движки устроены.

Answer 3

[xmoonlight]

Полигон: вытянутая трапеция.

Comments

[Umid]

А как можно найти координаты точек A, B, A1, B1?

[Umid]

Изначально известно лишь O и O1

[Ди Ма]

Umid:

[Umid]

Ди Ма: это то понятно.
Но как найти координаты с картинки моей.
Точки A,B,A1,B1?

[xmoonlight]

Umid: 2D вращение вокруг центра

[Ди Ма]

Umid: Точки О и О1 есть.
От точки О находим А через sin и cos (угол и радиус тоже ведь есть).
Точка B- это А с противоположенными знаками.
С точками А1 и В1 то-же самое (если, конечно, эти координаты не считаются от А и В)

[Umid]

Ди Ма: Хорошо. А какой угол брать для sin и cos?

[Ди Ма]

Umid: Углы рассчитываются не руками. Если у нас есть две точки на плоскости, то мы можем найти длину вектора, угол между вектором и осью (или другим вектором).
Тогда для поворота объекта (множество точек) умножаем координаты на матрицу поворота (указывая полученный ранее угол).
Для масштабирования или перемещения так-же используем нужную матрицу.
Для анимации нужна длинна вектора, которую поделив на скорость- получим время анимации. Вычислив разницу между старой позицией и новой (для каждой оси) получаем на сколько нужно изменить X и Y за полученное время.

Answer 4

[Алексей Джо]

https://jsfiddle.net/6cnLaqnw/2/
Используется цилиндр в качестве примитива. В примере для наглядности выбран MeshNormalMaterial. Материалы брать отсюда -
https://threejs.org/docs/#api/materials/Material

Comments

[Umid]

Only Canvas. Clean Canvas.

[Umid]

Фреймворки исключены.

[Алексей Джо]

Umid: Задача сводится к цилиндру, так или иначе.