javascript - 如何创建不同颜色的线条

Question

我正在对不同的视频和图像进行一些“统计”分析。每帧都是类似直方图的。在每个帧中，我采用 16 种预定义颜色并对它们进行评分。

我正在将线条(从上到下)绘制到 Canvas 中，其中每条线条都可以由不同强度的 16 种颜色组成。对于每个框架， Canvas 中都有一条新线。

我的问题:

1.) 如何绘制不同颜色的线条？到目前为止，我只想到用指定的颜色绘制线的一部分，然后(如果需要)从该线的最后一个点再次用新颜色绘制新的子线。因此，在最坏的情况下，我会为一行执行 16 次。我怎样才能更轻松地做到这一点？

2.) 如何对这些颜色应用某种“强度”(更亮/更暗)？

3.) 由于我可能必须为一个视频绘制 100.000 多条线，我该怎么做才能加快绘制时间并节省内存？ (好吧，至少我猜这需要一些时间，到目前为止我没有代码，只能假设......)。 “预先计算”每条线并将其保存在某处并在需要时将其弹出到 Canvas 中是一个好方法吗？

Answer 1

1. Html5 线条是使用以 context.beginPath 开头的路径命令绘制的。您可以使用一组线条路径命令绘制多条线段，但每组只能有一种样式(==一种颜色)。您的解决方法(正如您所怀疑的)是为每个所需的彩色线段发出单独的 beginPath 命令。

2. Html5 颜色默认为 RGBA 颜色格式，但您也可以使用 HSLA 颜色格式。通过这种方式，您可以更改“L”值以使色调变亮或变暗。 (色调“H”基本上就是您的颜色)。

3. 优化线条图很大程度上取决于您自己的应用中的条件。如果线条需要大量处理来确定其位置、颜色或其他样式，那么您可能(或可能不会)通过预先计算这些线条值来获得性能。总的来说， Canvas 绘制路径命令(线条)非常非常快，所以我肯定会首先测试“实时”绘制线条，看看 Canvas 是否可以跟上。

祝您的项目顺利!