將兩個畫布放在海誓山盟之上CSS

我試圖將兩個帆布放置在eachother的頂部，同時讓它們像這樣居中，但我懷疑一個畫布是不在框架中的。將兩個畫布放在海誓山盟之上CSS

CSS：

body { background-color: #000000; text-align: center; margin: 0px; padding: 0px; width:100%; height:100%; } 
* { margin:0; padding:0; } 
canvas { display:block; padding: 0; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } 
cnv1 { z-index: 2; } 
cnv2 { z-index: 1; }

HTML：

<canvas id="cnv1">U no do HTML5, fix.</canvas> 
<canvas id="cnv2">U no do HTML5, fix.</canvas>

的Javascript：

var cnv = document.getElementById('cnv1') 
var ctx = cnv.getContext('2d'); 
var cnv2 = document.getElementById('cnv2') 
var ctx2 = cnv2.getContext('2d');

如果我現在嘗試寫東西像

ctx.font = "30px Arial"; 
ctx.fillStyle = "red"; 
ctx.fillText('images loaded and ready to go', 180, 45);

那就不會出現。但寫入ctx2會。

來源

2017-04-13 Daniel Bengtsson

請問你爲什麼要2個畫布？如果您正確設計您的應用程序，則不需要2個畫布...... Javascript無論如何都是單線程的。只需要在給定畫布上繪製自己的實體。讓背景中的實體先繪製，然後再繪製其他實體。 – Tschallacka

這是一個性能提升。通過將背景放置在單獨的畫布上，我不必清除整個畫布，然後在重繪形狀或圖片時在每個循環中重繪背景。現在，我只是在每次重繪該區域時清除另一個畫布上的一個非常小的矩形。通過這種方式，我節省了電池電量（它適用於手機應用程序），並佔用更少的處理能力。 –

好吧，原來這只是我累了。我只是忘了添加＃到CNV1 & CNV2部分的CSS：

#cnv1 { z-index: 2; } 
#cnv2 { z-index: 1; }

它可以作爲目前打算。謝謝大家的時間。

來源

2017-04-13 06:51:11

但是如果你沒有寫＃那麼它怎麼可以爲cnv1工作？ – Chirag

這是你想要的東西嗎？背層和前層現在重疊。我唯一要做的就是顛倒它們在html中出現的順序。

我不知道爲什麼Z指數不工作/不服從。但扭轉他們的外觀順序運作良好。

var cnv = document.getElementById('cnv1') 
 
var ctx = cnv.getContext('2d'); 
 
var cnv2 = document.getElementById('cnv2') 
 
var ctx2 = cnv2.getContext('2d'); 
 

 

 
ctx.font = "30px Arial"; 
 
ctx.fillStyle = "red"; 
 
ctx.fillText('images loaded and ready to go', 25, 95); 
 

 
ctx2.save(); 
 

 
//ctx2.globalAlpha = 0.5; 
 
ctx2.clearRect(0,0,ctx2.width,ctx2.height); 
 
ctx2.fillStyle="#eeeeee"; 
 
ctx2.fillRect(0,0,50,200); 
 
ctx2.fillRect(50,50,50,150); 
 
ctx2.fillRect(100,0,25,200); 
 

 
ctx2.fillRect(150,50,50,150); 
 

 
ctx2.fillStyle="#202020"; 
 
ctx2.fillText('Gotham City.', 20, 128);

body { 
 
    background-color: #000000; 
 
    text-align: center; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width:100%; 
 
    height:100%; } 
 
* { 
 
    margin:0; 
 
    padding:0; 
 
    } 
 
canvas { 
 
    display:block; 
 
    padding: 0; 
 
    margin: auto; 
 
    position: absolute; 
 
    top: 0; 
 
    
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color:transparent; 
 
    } 
 
#cnv1 { 
 
    z-index: 2; 
 
    } 
 
#cnv2 { 
 
    z-index: 1; 
 
    }

<canvas id="cnv2">U no do HTML5, fix.</canvas> 
 
<canvas id="cnv1">U no do HTML5, fix.</canvas>

來源

2017-04-13 07:02:08 Tschallacka

將兩個畫布放在海誓山盟之上CSS

回答

相關問題