Question

使用HTML画布路径，我试图实现Joel Besada的jQuery Scrollpath plugin - 这一直顺利，直到我试图将路径变成虚线。

我在线找到了setLineDash（）的文档，看起来你只是在调用stroke（）之前将它与其他2D上下文线条样式一起添加，所以我在jquery.scrollpath.js文件中修改了那个部分并添加了与我所有其他线型自定义，但没有运气。

我在这里使用Joel的demo源代码设置了CodePen：

我添加的唯一内容是第391行到js窗格中的Scrollpath插件：

context.setLineDash([50,3]);

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

Answer 1

setLineDash更常见的错误是将短划线之间的间隙设置得太短。

潇洒时，你必须考虑线帽：

灰色破折号之后的那一行部分恰好是笔画宽度的一半。

因此，如果您使用strokeCap 'square'或'round'，那么如果您正在使用笔划宽度为50的线条，那么间距为51的最小间隔为1个白色像素

如果您在第1个示例中使用'butt'，则可以看到任何间隙。