0

我曾几次遇到过这个问题，但我似乎无法找到可靠的答案或解决方案。

我创建了一个站点，它使用两个相互叠加的画布，它们在 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>

我觉得我可能听说过使用负 z-index 的潜在 Firefox 问题，这真的是问题吗？

4

1 回答 1

2

规范中的文档对象没有widthorheight属性，因此document.width以 undefined 结尾，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-14T03:06:54.180 回答