javascript - 将 Canvas 元素放在前面？

Question

我正在尝试让多个光标在我的网页上飞来飞去。我让他们工作。我的问题是它们在 HTML5 和 javscript 之上 <canvas>元素。当他们结束时，我在页面上的其他 JQuery 动画工作正常，但它在大部分 Canvas (这是一个大的、交互式的星空)上放置纯白色。我该如何解决这个问题？

如果需要我可以提供一些代码，但是我构建它的方式依赖于很多外部脚本和样式表等，所以它可能有点繁琐。

基本上，我需要在保持部分 JQuery 动画的同时将 Canvas 置于最前面。

编辑:我认为如果我展示一张显示问题的图片会更有帮助。

您可以在底部看到星空的剩余部分。白色停止和星域开始的地方是光标动画的垂直约束。

我想让星空显示在背景之上，但在光标之下。无论如何，是否有可能将容器的背景(这是一个 div 元素)设置为带有 CSS 的脚本，并使用该脚本为星空设置动画？然后，我将能够最大化容器的大小，并让光标在全屏范围内飞来飞去。

另外，不要担心黄色鳄鱼；它是一个单独的 JQuery 动画，可以作为背景的一部分。

EDIT2:我想我已经解决了我的问题，但我不确定如何解决它。要在容器内设置光标动画，<div>游标的 s 在容器的 <div> 内.游标的 CSS 设置为最高的 z-index，但容器的 CSS 设置为最低的 z-index。我怎样才能解决这个问题。

同样，如有必要，我可以提供脚本，但我相信这里最相关的脚本是使光标具有动画效果的脚本，所以我将放在这里:

$(document).ready(function() {
    animateDiv($('.a'));
        animateDiv($('.b'));
        animateDiv($('.c'));

});

function makeNewPosition($container) {

    // Get viewport dimensions (remove the dimension of the div)
    var h = $container.height() - 50;
    var w = $container.width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh, nw];

}

function animateDiv($target) {
    var newq = makeNewPosition($target.parent());
    var oldq = $target.offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

    $target.animate({
        top: newq[0],
        left: newq[1]
    }, speed, function() {
        animateDiv($target);
    });

};

function calcSpeed(prev, next) {

    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);

    var greatest = x > y ? x : y;

    var speedModifier = 0.25;

    var speed = Math.ceil(greatest / speedModifier);

    return speed;

}

编辑3:

有效!有用!

我拿了另一个<div>容器外的元素。我从另一个 SO 问题中复制了脚本，那里的例子让我相信 <divs>必须在容器内。但是，当我把它们放在外面时，一切都按预期进行。哦耶!

谢谢!埃姆维德

Answer 1

使用 CSS，您可以像这样使用 z-index 属性更改元素的层，

CSS

canvas { 
    position: absolute;
    z-index: 100;
}

请注意，因为您说您使用了很多样式表，您可能需要将 z-index 数字增加到高于 999，因为很多插件会将其设置为 999。也为您要使用 z-index 属性，元素必须设置位置属性