标题/动画中的画布

Question

我想在我的标题中使用这样的东西： http://forumstyle.us/forumus/transparent-version/

我的意思是带有悬停效果的标题中的画布，但我不知道那是什么，如何构建它，是一些脚本还是 css？ 效果应该有我提供的链接中的链接，它应该与点相连，悬停时线条应该跟随鼠标光标。

谢谢！

Answer 1

TLDR：

它使用了一个基于 jQuery JavaScript 库的 jQuery 插件，该插件通过操作 Canvas 元素来获得这种粒子效果。

更长但更酷，我如何在下一次教程中自己解决这个问题！

让我们谈谈我们如何解构网络上的事物！ （我在本演练中使用的是 Chrome 网络浏览器，但其他浏览器也可以做同样的事情，它们内置了类似的工具。）

1. 找到有问题的 DOM 元素
2. 找到它的类/ID/元素名称，这在某处的代码中用于“抓取”，然后对其进行处理
3. 使用我们找到的名称，在本例中是类header--slider
4. 使用 Chrome 的 DevTools 进行搜索（请参阅 https://developers.google.com/web/tools/chrome-devtools/）

5. 看到var $headerSliderEl = $('.header--slider'); 出现在搜索中。双击那行代码，我们会看到这个 JavaScript 文件在 Chrome DevTools 中弹出，现在我们知道与这个包含 Canvas 标签的元素的交互从哪里开始。现在更多的挖掘......

6. 搜索此jParticle 对象。我感觉这是他们正在引入的某种 JavaScript 库

1. 是的！这是页面上引用的某种 jQuery 插件。它们通常采用 [jquerypluginname].jquery.js 格式。他们可能已经提取了这个为他们制作画布动画的库。
2. 所以现在我们知道了文件名。在 Chrome DevTools 的“Sources”面板中的一件很酷的事情是，您可以在 Windows 上按 CTRL+O 或在 Mac 上按 COMMAND+O，它会在页面上为您提供源文件列表，您可以输入源文件的名称文件名，它会自动完成。开始输入我们找到的文件名，然后选择它或按 Enter 键以在 Chrome DevTools 中打开该文件。

9. 我们找到了它，但它是一行，而且看起来像 gobbly-gook！这意味着文件很可能被缩小和丑化了。这些技术可以节省文件大小，并使 JavaScript 文件在浏览器中加载得更快。如果您不想在一行中看到所有内容，可以单击左下角的花括号。但是，它仍然会被缩小（sadpanda）。

此时你可以做几件事，你可以点击文件的排水沟，在其中一个行号上，设置一个断点，然后刷新页面，开始看看这个 JavaScript 在野外是如何工作的，通过逐步完成它。您可以将鼠标悬停在变量上，它会告诉您当前值。它可能具有教育意义。

另一种选择是在 google 上搜索这个 jQuery 插件，并查看它的源代码。看起来他们可能是从这个 codepen 中获取的，至少看起来非常相似：

https://codepen.io/waddington/pen/nIvxh

这肯定是使用 Canvas API：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

还有其他方法可以为网络上的事物设置动画。在此处查看我的演示文稿（按向右箭头前进）：https://program247365.github.io/web-animations/#/