Question

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

我创建了一个网站，它使用两个相互叠加的画布，可以在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索引可能存在火狐问题，这真的是问题吗？

Answer 1

规范中的文档对象没有width或height属性，因此document.width最终为未定义，document.height也是如此。因此，您要将canvas1设置为宽度和高度为0，这是未定义转换为的数字。

您可能想要使用https://developer.mozilla.org/en-US/docs/DOM/document.width#Alternatives和https://developer.mozilla.org/en-US/docs/DOM/document.height#Alternatives

中列出的内容之一

Javascript画布不在Firefox中显示

1 个答案: