无法让画布显示任何内容答案

【问题标题】：cant get canvas to display anything无法让画布显示任何内容
【发布时间】：2014-06-10 14:53:22
【问题描述】：

我试图在画布上绘制瓷砖，我什至遵循了一个教程，我确保图像在同一个目录中，我只是不明白为什么这不像教程那样工作。有人可以看看我看不到的错误，它把我逼疯了。

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

【问题讨论】：

可能图片找不到。 Javascript 控制台中的任何错误？图片是否与 html 位于同一目录中？它们应该是……它与 JS 无关。
它都在同一个文件夹中，我在开发工具中通过它，没有错误
你参考了哪个教程？
youtube.com/watch?v=0ODCykUueQo

标签： javascript arrays html canvas

【解决方案1】：

您可以使用图像的 .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】：

请检查控制台，如 cmets 中所述，它可能没有加载图像，因为我只是快速更改了图像的 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>

【讨论】：

哇，这到底是什么，两个图像都是grass.png和dirt.png，并且在同一个文件夹中我该怎么办？
是的，实际上这可能是因为在加载图像之前画布已被绘制。您可以先通过 AJAX 加载图像，然后再进行渲染。检查此链接。stackoverflow.com/questions/8761713/jquery-ajax-loading-image