Javascript畫布不在Firefox中顯示

我遇到過幾次這個問題，但似乎無法找到問題的可靠答案或解決方案。Javascript畫布不在Firefox中顯示

我創建了一個網站，它使用兩個層疊在一起的畫布，可以在Chrome中正確顯示，但在Firefox中只會顯示其中一個畫布。這裏是我的代碼：

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script type="text/javascript"> 

var interval; 
    var width, height; 

// ------------- SETUP ----------------------  
    window.onload = function() { 
     width = document.width; 
     height = document.height; 
    setupC1(); 
     setupC2(); 
} 

function setupC1(){ 
    canvas1 = document.createElement("canvas"); 
    canvas1.width = document.width; 
    canvas1.height = document.height; 
     canvas1.style.position = "absolute"; 
     canvas1.style.top = "0px"; 
     canvas1.style.left = "0px"; 
     canvas1.style.zIndex = "-2"; 
    document.body.appendChild(canvas1); 
    ctx = canvas1.getContext("2d"); 
     interval = setInterval(draw, 50); 
} 

    function setupC2(){ 
    canvas2 = document.createElement("canvas"); 
    canvas2.width = "399"; 
    canvas2.height = "274"; 
     canvas2.style.position = "absolute"; 
     canvas2.style.top = (window.innerHeight/2)-100 +"px"; 
     canvas2.style.left = (window.innerWidth/2)-200 +"px"; 
     canvas2.style.zIndex = "-1"; 
    document.body.appendChild(canvas2); 
    ctx2 = canvas2.getContext("2d"); 
     interval = setInterval(gun, 50); 
} 


// ------------- DRAW ----------------------  
    function draw() { 

    var x = Math.round(Math.random()*window.innerWidth); 
    var y = Math.round(Math.random()*window.innerHeight); 
    function rndColor() { 
     return '#' + ('00000' + (Math.random() * 16777216 << 0).toString(16)).substr(-6); 
    } 
    //draw here 

     ctx.strokeStyle=rndColor(); 

     ctx.beginPath(); 
     ctx.moveTo(window.innerWidth/2, window.innerHeight/2); 
     ctx.lineTo(x, y); 
     ctx.closePath(); 
     ctx.stroke();    

    } 

function gun(){ 
    ctx2.fillStyle="#000000"; 
     ctx2.strokeStyle="#000000"; 
     ctx2.beginPath(); 
     ctx2.moveTo(51, 28); 
     ctx2.lineTo(66, 28); 
     ctx2.lineTo(71, 19); 
     ctx2.lineTo(75, 19); 
     ctx2.lineTo(77, 28); 
     ctx2.lineTo(191, 28); 
     ctx2.lineTo(191, 30); 
     ctx2.lineTo(238, 30); 
     ctx2.lineTo(238, 28); 
     ctx2.lineTo(350, 28); 
     ctx2.lineTo(355, 23); 
     ctx2.lineTo(358, 28); 
     ctx2.lineTo(368, 28); 
     ctx2.lineTo(368, 36); 
     ctx2.lineTo(373, 36); 
     ctx2.lineTo(374, 59); 
     ctx2.lineTo(368, 59); 
     ctx2.lineTo(368, 69); 
     ctx2.lineTo(371, 69); 
     ctx2.lineTo(371, 77); 
     ctx2.lineTo(368, 80); 
     ctx2.lineTo(368, 95); 
     ctx2.lineTo(265, 102); 
     ctx2.lineTo(265, 153); 
     ctx2.lineTo(164, 153); 
     ctx2.lineTo(169, 141); 
     ctx2.lineTo(249, 141); 
     ctx2.lineTo(249, 103); 
     ctx2.lineTo(198, 106); 
     ctx2.bezierCurveTo(192, 106, 195, 135, 200, 137); 
     ctx2.lineTo(194, 139); 
     ctx2.bezierCurveTo(190, 136, 178, 108, 180, 106); 
     ctx2.lineTo(169, 143); 
     ctx2.lineTo(156, 156); 
     ctx2.lineTo(157, 176); 
     ctx2.lineTo(143, 190); 
     ctx2.lineTo(144, 208); 
     ctx2.lineTo(129, 222); 
     ctx2.lineTo(129, 242); 
     ctx2.lineTo(120, 242); 
     ctx2.lineTo(120, 255); 
     ctx2.lineTo(42, 246); 
     ctx2.lineTo(48, 233); 
     ctx2.lineTo(37, 231); 
     ctx2.lineTo(25, 220); 
     ctx2.lineTo(75, 113); 
     ctx2.bezierCurveTo(75, 90, 55, 85, 46, 83); 
     ctx2.closePath(); 
     ctx2.fill(); 
     ctx2.stroke(); 
} 
</script> 
</head> 

<body> 
</body> 
</html>

我覺得我可能已經聽說過關於潛在問題的Firefox使用負z索引，可能真的是什麼問題？

來源

2013-04-13 qwentl

中有功能的文檔對象上沒有width或height屬性，所以document.width結束爲未定義，也是如此document.height。因此，您將canvas1的寬度和高度設置爲0，這是undefined轉換爲的數字。

您可能需要使用在https://developer.mozilla.org/en-US/docs/DOM/document.width#Alternatives列出的東西之一，https://developer.mozilla.org/en-US/docs/DOM/document.height#Alternatives

來源

2013-04-14 03:06:54

完美，非常感謝你！ – qwentl

不客氣！ –

Javascript畫布不在Firefox中顯示

回答

相關問題