將畫布元素放在前面？

我試圖讓multipe遊標在我的網頁上飛來飛去。我讓他們工作。我的問題是，他們在HTML5和javscript <canvas>元素之上。當他們結束時，我在頁面上的其他JQuery動畫工作正常，但它在大部分畫布上（這是一個大型的，交互式的，星空的）顯示爲純白色。我怎樣才能解決這個問題？將畫布元素放在前面？

如果需要，我可以提供一些代碼，但是我構造它的方式依賴於很多外部腳本和樣式表等，所以它可能有點煩瑣。

基本上，我需要將畫布放在前面，同時保留部分JQuery動畫。

編輯：我認爲這將是更有幫助的，如果我顯示圖片顯示問題。

Imgur

你可以看到仍然在底部的星空中。白色停止和星域開始的地方是光標動畫的垂直約束。

我想讓星空顯示在背景下，但在光標下。無論如何，可能會將容器的背景（這是一個div元素）設置爲使用CSS的腳本，並使用該腳本爲starfield設置動畫效果？然後，我可以最大化容器的大小，並給遊標全屏幕飛入。

另外，不要擔心黃色的鱷魚;它是一個獨立的JQuery動畫，可以作爲背景的一部分。編輯2：我想我找到了我的問題，但我不知道如何解決它。爲了在容器內激活光標，光標的<div>位於容器的<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; 

}

EDIT3：

有用！有用！

我把其他<div>元素從容器中取出。我從另一個SO問題中複製了腳本，並且那裏的示例使我相信<divs>必須位於容器內。但是，當我把它們放在外面時，一切都按照它應該的那樣工作。哦耶！

謝謝！ evamvid

來源

2014-02-07 evamvid

您可以將CSS z-index屬性添加到畫布元素。 –

使用CSS，你可以改變的，象這樣的Z-index屬性的元素的層，

CSS

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

請注意，因爲你說你正在使用很多樣式表，您可能需要將z-index數字增加到999以上，因爲大量插件會將其設置爲999。同樣爲了您使用z-index屬性，元素必須具有位置屬性集

來源

2014-02-07 06:20:23

我可以使用z-index屬性來操作其他css元素嗎？ – evamvid

@evamvid：您可以使用它來操縱任何* DOM元素。但是，必須滿足某些條件才能使財產發揮作用。請參閱https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index。 –

我使用的代碼將畫布設置爲''。示例中給出的CSS是否必須變爲'#c {0} 0％0％ z-index：100; }'？還是會保持不變，無論畫布編號如何？ – evamvid

將畫布元素放在前面？

回答

相關問題