为什么我无法在chrome上打开我的html5画布？

我刚开始学习如何使用HTML5画布，并且我想制作一个简单的pacman，当我尝试用firefox打开它时，它运行良好，但是当我尝试用铬打开它时，我得到了空白页。为什么我无法在chrome上打开我的html5画布？

<script> 
     window.onload = function(){ 
      var canvas, ctx, img; 
      var index2 = 0; 
      var vx=3,vy=3; 

      function Enemy(){ 
       var pos = []; 
       img = new Image(); 
       img.src='image/chompersprites.png'; 

       function sprite(sx,sy){ 
        this.sourceX = sx; 
         this.sourceY = sy; 
       } 

       var draw = new Array(); 
        draw[0] = new sprite(0,0); 
       draw[1] = new sprite(32,0); 
       draw[2] = new sprite(0,32); 
       draw[3] = new sprite(32,32); 
       draw[4] = new sprite(0,64); 
       draw[5] = new sprite(32,64); 
       draw[6] = new sprite(0,96); 
       draw[7] = new sprite(32,96); 
       for (var posX, i=0; i<6; i++){ 
        posX=Math.random()*368; 
        pos.push(posX); 
       } 
       var order = [0,1,2,3,4,5,6,7]; 
       var index = 0; 
       function d_enemy(){ 
       for (var i=0;i<3;i++){ 
       ctx.drawImage(img,draw[order[index]].sourceX,draw[order[index]].sourceY,32,32,pos[i*2],pos[i*2+1],32,32); 
       index++; 
       if (index==order.length) { 
        index=0; 
       } 
       } 
       } 
       setInterval(d_enemy,100); 
      } 

      function Pacman(){ 
       function sprite(sx,sy){ 
        this.sourceX = sx; 
         this.sourceY = sy; 
       } 

       var pacmanX=canvas.width/2,pacmanY=canvas.height/2; 

       var draw = new Array(); 
       draw[0] = new sprite(320,0); 
       draw[1] = new sprite(352,0); 
       draw[2] = new sprite(320,32); 
       draw[3] = new sprite(352,32); 
       draw[4] = new sprite(320,64); 
       draw[5] = new sprite(352,64); 
       draw[6] = new sprite(320,96); 
       draw[7] = new sprite(352,96); 

       var order = [0,1,2,3,4,5,6,7]; 
       function d_pacman(args) { 
       ctx.clearRect(0,0,400,400); 
       img = new Image(); 
       img.src='image/chompersprites.png'; 
       ctx.drawImage(img,draw[order[index2]].sourceX,draw[order[index2]].sourceY, 32,32,pacmanX,pacmanY,32,32); 
       index2++; 
       if (index2==2){ 
        index2-=2; 
        pacmanX+=vx; 
       } 
       if (index2==4){ 
        index2-=2; 
        pacmanY+=vy; 
       } 
       if (index2==6){ 
        index2-=2; 
        pacmanX-=vx; 
       } 
       if (index2==8){ 
        index2-=2; 
        pacmanY-=vy; 
       } 
       if (pacmanX-16>400){pacmanX=0-16} else if (pacmanX+16<0){pacmanX=400+16}; 
       if (pacmanY-16>400){pacmanY=0-16} else if (pacmanY+16<0){pacmanY=400+16}; 
       } 
       setInterval(d_pacman,100); 
      } 


       window.addEventListener('keydown', function(event) { 
        switch (event.keyCode) { 
        case 37: // Left 4,5 
        index2=4; 
        break; 

        case 38: // Up 6,7 
        index2=6; 
        break; 

        case 39: // Right 0,1 
         index2=0; 
        break; 

        case 40: // Down 2,3 
         index2=2; 
        break; 
        } 
       }, false); 

      function Init(){ 
       canvas = document.getElementById('canvas'); 
       ctx = canvas.getContext('2d'); 
       Pacman(); 
       Enemy(); 
      } 
      Init(); 
     } 
    </script> 
</head> 
<body> 
    <canvas id='canvas' width='400' height='400'></canvas> 
</body>

任何人都可以帮忙吗？我真的想知道什么是错的

来源

2014-03-26 user3462435

它在Chrome中工作。我在版本34.0.1788.0 –

img = new Image(); 
img.src='image/chompersprites.png'; 
ctx.drawImage(img,draw[order[index2]].sourceX,draw[order[index2]].sourceY, 32,32,pacmanX,pacmanY,32,32);

您正在绘制图像时不知道图像是否加载。

img.onload = function(){ // Image loaded }

来源

2014-03-26 14:07:46

尝试相同的哦，我看到..感谢信息，它的工作原理 – user3462435

为什么我无法在chrome上打开我的html5画布？

回答

相关问题