无法使画布显示任何内容

cant get canvas to display anything

本文关键字：显示 任何内 布显示      更新时间：2023-09-26

我试图在画布上绘制瓷砖，我甚至遵循了一个教程，我确保图像在同一个目录中，我只是不明白为什么这与教程完全不同。有人能看到我没有看到的错误吗？它把我逼疯了。

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

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

您可以使用图像的.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;
    }
}
相关文章：