Question

我正在编写HTML应用程序。它是一个像素艺术地图自动生成器。使用定义的标签（墙，屋顶，草，三）来读取JSON文件，其中使用HTML画布绘制。我正在做一个基本测试。但它不起作用：（

这是JSON文件的代码，它描述了要绘制的图像：

"map" {
    "width": "400",
    "height": "300",
    "wall": {
        "width": "100",
        "height": "100",
        "brick": "01",
        "brick_width": "30",
        "brick_height": "30",
        "x_pos": "50",
        "y_pos": "30"
    }

}

这是应用程序的代码。

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <title>EXAMPLE</title>
</head>

<body>
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript">
        $.getJSON("example01.json", function(dat) {
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");
            canvas.width = data.map.width;
            canvas.height = data.map.height;

            var wallImage = new Image();
            wallImage.src = "./brick01.png";

            wallImage.onload = function() {

                var wallPattern = ctx.createPattern(wallImage, "repeat");

                ctx.fillRect(data.map.wall.x_pos, data.map.wall.y_pos, data.map.wall.widht, data.map.wall.height);
                ctx.fillStyle(wallPattern);

            }

        });
    </script>
</body>

</html>

如您所见，我使用jQuery作为.getJSON;和绘图，.fillStyle。

但是这段代码不起作用。在我的浏览器（Mozilla Firefox 29）中打开HTML文件时，画布不是绘制的。浏览器只是打开一个空白页面。

有什么问题？ HTML是否不读取JSON文件？

Answer 1

你写dat然后你使用数据

试试这个

var json=$.parseJSON('{"map": {"width": 400,"height": 300,"wall": {"width": 100,"height": 100,"brick": 1,"brick_width": 30,"brick_height": 30,"x_pos": 50,"y_pos": 30}}}');
canv(json);
function canv(data) {
    var newCanvas = $('<canvas/>',{
                       'class':'radHuh',
                        id: 'myCanvas'                    
                    }).prop({
                        width: data.map.width,
                        height: data.map.height,

                    });
     var newImg = $('<img/>',{
                        id: 'myImg'                    
                    }).prop({
         src:"http://hamzaalayed.com/images/icon_skills.png",


                    });
     $('body').append(newCanvas);
     $('body').append(newImg);
     var canvas = document.getElementById("myCanvas");
     var ctx = canvas.getContext("2d");
     var wallImage = document.getElementById("myImg");
     wallImage.onload= function() {
                var wallPattern = ctx.createPattern(wallImage, "repeat");
   ctx.rect(data.map.wall.x_pos,data.map.wall.y_pos,data.map.wall.width,data.map.wall.height);

    ctx.fillStyle=wallPattern;
    ctx.fill();
   };

}

JSON文件已被读取？

1 个答案: