canvas绘制折线路径动画实现

最近有读者加我微信咨询这个标题：

此中的结果是一个折线路径动画结果，如下图所示：

要实现以上路径动画，一般可以使用svg的动画功能。或者使用canvas绘制，结合路径数学计算来实现。
如果用canvas来绘制，此中的难点在于：

• 必要计算子路径，这块计算比较复杂。（固然是可以实现的）
• 渐变的计算， 从图中可以看出，动画的子路径是有渐变结果的，如果要分段计算渐变也很复杂。

本文介绍一种思绪，使用clip方法，动态移动clip的区域，来达到近似的结果。具体怎么做。

绘制灰色路径

绘制路径的代码比较简单，此处就不详细说明，下面代码就模拟了了一个折线路径的绘制：

结果如下:

绘制亮色路径

绘制亮色路径的代码和绘制灰色路径的代码一样，只是样式是一个亮的颜色：

结果如下：

clip控制亮色路径的绘制区域

canvas的clip方法可以控制绘制的区域，通过该方法，可以控制智绘制路径的一部门：

clip之后，亮色路径就只会绘制一部门,如下图：

动画结果

通过不绝变革offset的值，就可以大道亮色路径移动的结果，代码如下：

最终结果如下：

渐变

我们知道渐变没法沿着任意路径，如果计算折线，分段计算渐变又很麻烦。 其着实本案例中，虽然是折线，但是团体的活动方向总是从左往右的，以是可以用从左往右的渐变来近似模拟既可以：

最终结果如下所示：

全部代码

总结

实在团体思绪是用了近似，而不是严格的控制路径长度和渐变结果，如许可以更方便实现以上功能。  实在人眼偶尔候是分辨不出来一些细节，可视化，有的时候只有可以或许达到让人“觉得”是那么回事，实在目的也就达到了。
以上方案只能适用于，折线路径的团体方向是一致的。如果团体方向是先水平向右，然后在垂直向下，或者甚至出现往回拐的环境，就不适合了。

到此这篇关于canvas绘制折线路径动画实现的文章就介绍到这了,更多干系canvas折线路径动画内容请搜索脚本之家从前的文章或继续浏览下面的干系文章，希望大家以后多多支持脚本之家！