javascript - setLineDash() 不适用于 jQuery Scrollpath 插件

Question

使用 HTML Canvas 路径，我正在尝试实现 jQuery Scrollpath plugin来自 Joel Besada - 进展顺利，直到我尝试将路径变成虚线。

我在网上找到了 setLineDash() 的文档，看起来您只需在调用 Stroke() 之前将其与其他 2D 上下文线条样式一起添加，因此我更改了 jquery.scrollpath.js 文件中的该部分并添加了该内容与我所有其他线条样式自定义一起使用，但没有运气。

我在这里与 Joel 的 demo 设置了 CodePen源代码:

我唯一添加的是 js Pane 中 Scrollpath 插件的第 391 行:

context.setLineDash([50,3]);

有什么想法为什么它不起作用吗？

Answer 1

setLineDash 更常见的错误是将破折号之间的间距设置得太短。

冲刺时你必须考虑线帽:

灰色虚线之后的线条部分恰好是笔划宽度的一半。

因此，如果您要绘制一条描边宽度为 50 的虚线，则如果您使用的是 strokeCap 'square' 或，则间隙为 51 的最小间隙为 1 个白色像素'圆形'。

如果您像第一个示例一样使用'butt'，则任何间隙都会可见。