Javascript画布未在Firefox中显示_Javascript_Firefox_Html5 Canvas

Javascript画布未在Firefox中显示

javascript firefox html5-canvas

Javascript画布未在Firefox中显示,javascript,firefox,html5-canvas,Javascript,Firefox,Html5 Canvas,我有几次碰到过这个问题，但我似乎找不到解决这个问题的可靠答案我创建了一个网站，它使用两个画布相互叠加，在Chrome中可以正常显示，但在Firefox中只能显示其中一个画布。这是我的密码： <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> var interv

我有几次碰到过这个问题，但我似乎找不到解决这个问题的可靠答案

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


var区间；
宽度、高度；
//------设置-----------------
window.onload=函数（）{
宽度=文件宽度；
高度=文件高度；
设置C1（）；
设置C2（）；
}
函数设置C1（）{
canvas1=document.createElement（“canvas”）；
canvas1.width=document.width；
canvas1.height=document.height；
canvas1.style.position=“绝对”；
canvas1.style.top=“0px”；
canvas1.style.left=“0px”；
canvas1.style.zIndex=“-2”；
文件.body.appendChild（canvas1）；
ctx=canvas1.getContext（“2d”）；
间隔=设置间隔（抽签，50）；
}
函数设置C2（）{
canvas2=document.createElement（“canvas”）；
canvas2.width=“399”；
canvas2.height=“274”；
canvas2.style.position=“绝对”；
canvas2.style.top=（window.innerHeight/2）-100+“px”；
canvas2.style.left=（window.innerWidth/2）-200+“px”；
canvas2.style.zIndex=“-1”；
文件.正文.附件（canvas2）；
ctx2=canvas2.getContext（“2d”）；
间隔=设定间隔（枪，50）；
}
//------图纸-----------------
函数绘图（）{
var x=Math.round（Math.random（）*window.innerWidth）；
var y=Math.round（Math.random（）*window.innerHeight）；
函数rndColor（）{
返回“#”+（“00000”+（Math.random（）*16777216规范中的文档对象没有width
或height
属性，因此document.width
和document.height
都是未定义的。因此，您将画布1的宽度和高度设置为0，这是未定义的转换数
您可能需要使用和中列出的其中一项