Как создать линию с разными цветами

Question

Я делаю «статистический» анализ различных видео и изображений. Гистограмма похожа на каждый кадр. В каждом кадре я принимаю 16 предопределенных цветов и оцениваю их.

Я рисую линии (вверх) в холст, где каждая Линия может состоять из 16 цветов в разных интенсивностях. Для каждого кадра есть новая линия на холсте.

Мой вопрос:

1.) Как я могу рисовать линии с разными цветами? До сих пор я только придумал, что я рисую часть линии с указанным цветом, затем (при необходимости) снова рисую с последней точки этой Линии новую Subline с новым цветом. Итак, в худшем случае я делаю это 16 раз для одной линии. Как я могу сделать это более легко?

2.) Как я могу применить какую-то «интенсивность» (ярче/темнее) к этим цветам?

3.) Поскольку возможно, что мне нужно нарисовать 100.000+ линий для одного видео, что я могу сделать, чтобы ускорить время рисования и сохранить память? (ну, по крайней мере, я думаю, что это займет некоторое время, у меня пока нет кода, и я могу только предположить, что ...). Будет ли это хорошим подходом к «прекоммутированию» каждой Линии, кроме того, что где-то и когда это необходимо, чтобы поместить ее в холст?

Answer 1

1. Линии Html5 рисуются с использованием команд пуска, начинающихся с context.beginPath. Вы можете нарисовать несколько сегментов линии с помощью одного набора команд пути линии, но каждый отдельный набор может иметь только один стиль (один цвет). Ваш способ обхода (как вы подозревали) должен выдать отдельную команду beginPath для каждого желаемого сегмента цветной линии.

2. Цвет Html5 по умолчанию соответствует цветному формату RGBA, но вы также можете использовать цветной формат HSLA. Таким образом вы можете изменить значение «L», чтобы осветлить или затемнить оттенок. (Хен, «Н», это в основном ваш цвет).

3. Оптимизация чертежей линий в значительной степени зависит от условий в вашем собственном приложении. Если линии требуют значительной обработки для определения их положения, цвета или другого стиля, вы можете (или не можете) повысить производительность, предварительно вычислив эти значения строк. В целом, холст очень быстро рисует команды (строки), поэтому я, конечно, начинаю с теста, рисуя ваши строки «вживую», чтобы увидеть, может ли холст идти в ногу.

Удачи вам в вашем проекте!