Javascript 将网站开始动画（Raphael.js）转换为导航菜单（可控HTML标记）的方法

作为客户端技术的新手，尤其是创建动画的技术，我仍然发现很难在我的网站首页使用合适的方法

我的目标是首先加载一个动画，该动画将被转换为一个具体的HTML菜单，因此，我可以使用javascript库（如jQuery）处理和管理该菜单

让我们以Raphael.js创建的动画为例：

$(function () {
                var canvasWidth= $("#canvas").width();
                var canvasHeight= $("#canvas").height();

                var archtype = Raphael("canvas",canvasWidth, canvasHeight);

                archtype.customAttributes.arc = function (xloc, yloc, value, total, Radius) {
                // Logic for drawing
                };

                my_arc= = archtype.path().attr({
                    "stroke-width": 3,
                    arc: [r, h, 0, 100, r],
                });

                my_arc=.animate({
                    arc: [2*r, 2*h, 100, 100, 2*r]
                            }, 1200, "ease-in-out",function(){       

                                $("#menu").append('<li>Item 1</li>');
                               } //end callback
    );

$（函数（）{
var canvasWidth=$（“#canvas”）.width（）；
var canvasHeight=$（“#canvas”）.height（）；
var archtype=拉斐尔（“画布”，画布宽度，画布高度）；
archtype.customAttributes.arc=函数（xloc、yloc、值、总计、半径）{
//绘图逻辑
};
my_arc==archtype.path（）.attr({
“笔划宽度”：3，
弧：[r，h，0，100，r]，
});
我的_弧=.animate({
弧：[2*r，2*h，100，100，2*r]
}，1200，“缓进缓出”，函数（）{
$（“#菜单”）。追加（“
项目1
”）；
}//结束回调
);

根据：

<div id="menu"></div>
<div id="canvas"></div>

问题： 我是否应该使用CSS将

div#菜单

叠加在

div#画布上

，以便菜单项

与动画目标位置完全匹配？ 或者我应该找到一种在Rapahel.js和javascript之间链接的方法，以便画布元素（

，

…）被转换或嵌套到未来的

---

非常感谢您的帮助。非常感谢。

我想您这样做是在给自己设置一个受伤的世界

即使您成功地跟踪了动画中所有元素的移动，然后用外观相同的HTML元素替换它们，您也会强迫自己对所涉及的每个元素使用绝对定位，在我看来，这与将它们转换为HTML元素的目的背道而驰

如果你可以为你的页面设置一个固定的布局（我的意思是，除了向上或向下缩放整个布局外，布局不能响应不同的屏幕大小和形状），那么您也可以将事件处理程序附加到svg元素以处理交互。Raphael有许多用于处理元素事件的内置方法，例如和。这样，您就可以坚持将svg动画的结束状态作为站点的默认布局，并将行为直接添加到svg本身，而无需交换离开DOM，不得不处理大量的边缘问题

如果您对固定的布局不满意，那么您将很难调整动画，使其在适当的位置包含元素，以使页面具有不同设备/屏幕大小所需的布局。在这种情况下，您最好完全放弃svg的想法，看看是否可以做到这一点通过从HTML元素开始，并使用jQuery对它们进行操作，可以接近所需的动画

--编辑-- 我只是重读了你的问题，并意识到你在使用拉斐尔来操纵“画布”而不是“SVG”。我的建议是，考虑到上面提到的相同原因，你考虑使用拉斐尔来渲染SVG。 SVG非常整洁，因为它可以很容易地绘制和设置动画，但它不是光栅化到画布上，而是由标记元素的层次结构组成，很像HTML。事实上，您甚至可以使用CSS对它们进行样式设置。

---

我有点困惑。

#菜单

像一个弹出式窗口/工具提示吗？你是在问叠加与在svg中编写自定义工具提示相比是否是一个好策略吗？谢谢@Parris占用你的时间。我指的是

#菜单

a

div

，我将通过jQuery在其中放置一些嵌套的

s。我想你谈论cus给了我一个很好的提示tom svg。你是说一个抽屉式菜单将充当HTML菜单（不需要用jQuery叠加额外的HTML）在读完之前，.1，因为我真的开始被迫使用绝对位置。我觉得我不太理解你的编辑。事实上，我不使用画布，我使用一个id为canvas的空div。在这个div中，我的svg路径被绘制。我希望我是清楚的。啊，好的，这更有意义。