Question

我试图将瓷砖绘制到画布上，我甚至按照教程，我确保图像在同一目录中，我只是不明白为什么这不是像教程那样工作。有人可以看到错误，我没有看到，它驱使我爬上墙。

<!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>
        RPG 
    </title>

    <link rel="stylesheet" type="text/css" href="main.css">
    <!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js">    </script>
    <script type="text/javascript" src="main.js"></script>-->

</head>

<body>

<canvas id="canvas" height="900px" width="900px"></canvas>
<script>

var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    var map_array = [

    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,1,1,1,1,1,1,1,0,0],
    [0,0,0,1,1,1,1,1,1,1,0,0],
    [0,0,0,1,1,0,0,0,1,1,0,0],
    [0,0,0,1,1,0,0,0,1,1,0,0],
    [0,0,0,1,1,0,0,0,1,1,0,0]

    ];

    var grass=new Image();
    var dirt=new Image();

    grass.src='grass.png';
    dirt.src='dirt.png';


    var posX = 0;
    var posY = 0;

    for(i = 0; i < map_array.length; i++){

        for(j = 0; j < map_array[i].length; j++){

            if(map_array[i][j] == 0){

                context.drawImage(grass, posX, posY, 75,75);

            }
            if(map_array[i][j] == 1){

                context.drawImage(dirt, posX, posY, 75,75);

            }

            posX+=75;

        }

        posX = 0;
        posY+=75;


    }

</script>

</body>

</html>

Answer 1

请检查控制台，如评论中提到的可能是图片未加载，因为我很快就改变了图像的src并按预期工作。

我们在这里查看JSFiddle。

<强>代码

<canvas id="canvas" height="900px" width="900px"></canvas>
<script>

var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    var map_array = [

    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,1,1,1,1,1,1,1,0,0],
    [0,0,0,1,1,1,1,1,1,1,0,0],
    [0,0,0,1,1,0,0,0,1,1,0,0],
    [0,0,0,1,1,0,0,0,1,1,0,0],
    [0,0,0,1,1,0,0,0,1,1,0,0]

    ];

    var grass=new Image();
    var dirt=new Image();

    grass.src='http://i.imgur.com/tL6nW.gif';
    dirt.src='http://i.imgur.com/BfZ5f.gif';


    var posX = 0;
    var posY = 0;

    for(i = 0; i < map_array.length; i++){

        for(j = 0; j < map_array[i].length; j++){

            if(map_array[i][j] == 0){

                context.drawImage(grass, posX, posY, 75,75);

            }
            if(map_array[i][j] == 1){

                context.drawImage(dirt, posX, posY, 75,75);

            }

            posX+=75;

        }

        posX = 0;
        posY+=75;


    }

</script>

Answer 2

您可以使用图片的.onload回调功能，让所有图片在尝试使用它们之前完全加载。

示例代码和演示：http://jsfiddle.net/m1erickson/QeKR8/

var imageCount=2;
var grass=new Image();
grass.onload=start;
var dirt=new Image();
dirt.onload=start;
grass.src='https://dl.dropboxusercontent.com/u/139992952/multple/grass.png';
dirt.src='https://dl.dropboxusercontent.com/u/139992952/multple/sand.png';
function start(){

    if(--imageCount>0){return;}

    var map_array = [
        [0,0,0,0,0,0,0,0,1,1,0,0],
        [0,0,0,0,0,0,0,0,1,1,0,0],
        [0,0,0,0,0,0,0,0,1,1,0,0],
        [0,0,0,0,0,0,0,0,1,1,0,0],
        [0,0,0,0,0,0,0,0,1,1,0,0],
        [0,0,0,0,0,0,0,0,1,1,0,0],
        [0,0,0,0,0,0,0,0,1,1,0,0],
        [0,0,0,1,1,1,1,1,1,1,0,0],
        [0,0,0,1,1,1,1,1,1,1,0,0],
        [0,0,0,1,1,0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0,0,1,1,0,0]
    ];

    var posX = 0;
    var posY = 0;

    for(i = 0; i < map_array.length; i++){
        for(j = 0; j < map_array[i].length; j++){
            if(map_array[i][j] == 0){
                context.drawImage(grass, posX, posY, 25,25);
            }
            if(map_array[i][j] == 1){
                context.drawImage(dirt, posX, posY, 25,25);
            }
            posX+=25;
        }
        posX = 0;
        posY+=25;
    }
}

不能让画布显示任何东西

2 个答案: