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

Question

我刚刚开始学习如何使用HTML5 canvas进行绘制，并且我想制作一个简单的pacman，当我尝试使用firefox打开它时效果很好，但是当我尝试使用chrome打开它时却出现了空白页。

<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>

有人可以帮忙吗？ 我真的很想知道怎么了

Answer 1

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 }