javascript - 我可以使用 Raphael.js 之类的东西在 HTML 窗口上方绘制矢量吗？

Question

关于在 canvas 元素上绘图和使用 Raphael.js(非常棒)之类的东西有很多问题，但我想知道是否有办法可以绘制一些矢量(主要是对 Angular 线) ) 在 html 文档类型网页中呈现的 DOM 文档之上。

我没有对 canvas 元素做太多，但我认为也许可以用 perhaps 做这样的事情:

1. 使用 javascript 获取/监控窗口大小
2. 创建/调整占据整个页面的 Canvas 元素
3. 以某种方式设置 Canvas 元素的透明度
4. 绘制我想要的向量

当您使用清晰的 .gif 时，您无法点击它下面的内容或与之交互 - 我希望仍然能够正常地与该网页交互。我还希望通过滚动来正常上下移动页面，以便矢量可以随 DOM 元素一起滚动。

我的方向是否正确？

如何在标准网页中的 HTML/DOM 上方绘制矢量？

Answer 1

这是一个 Raphael.js 在 div http://raphaeljs.com/spin-spin-spin.html 中的文本顶部绘图的示例

关于拉斐尔的更多背景:

Raphael draws on an SVG canvas. If you give that a transparent background and position it over the window (z-index), then you can get the appearance you seek.

https://groups.google.com/forum/?fromgroups=#!topic/raphaeljs/SAPCl_UMNco