Javascript JSON文件已被读取？_Javascript_Jquery_Html_Json_Canvas

Javascript JSON文件已被读取？

javascript jquery html json canvas

Javascript JSON文件已被读取？,javascript,jquery,html,json,canvas,Javascript,Jquery,Html,Json,Canvas,我正在编写一个HTML应用程序。这是一个像素艺术地图自动生成器。读取一个JSON文件，其中使用定义的标记（墙、屋顶、草地、三个）描述地图，它在HTML画布上绘制。我在做一个基本的测试。但它不起作用：( 下面是JSON文件的代码，它描述了要绘制的图像： "map" { "width": "400", "height": "300", "wall": { "width": "100", "height": "100", "bri

我正在编写一个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>


例子
$.getJSON（“example01.json”，函数（dat）{
var canvas=document.createElement（“canvas”）；
var ctx=canvas.getContext（“2d”）；
canvas.width=data.map.width；
canvas.height=data.map.height；
var wallImage=新图像（）；
wallImage.src=“./brick01.png”；
wallImage.onload=函数（）{
var wallPattern=ctx.createPattern（wallImage，“repeat”）；
ctx.fillRect（data.map.wall.x_pos、data.map.wall.y_pos、data.map.wall.widt、data.map.wall.height）；
ctx.填充样式（墙图案）；
}
});

如您所见，我对

.getJSON；

使用jQuery，对绘图使用

.fillStyle

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

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

您写入数据，然后使用数据

试试这个

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();
   };

}

var json=$.parseJSON（“{”map:{“宽度”：400，“高度”：300，“墙”：{“宽度”：100，“高度”：100，“砖块”：1，“砖块宽度”：30，“砖块高度”：30，“x位置”：50，“y位置”：30}）；
canv（json）；
函数canv（数据）{
var newCanvas=$（''{
“类”：“radHuh”，
id:“我的画布”
}).道具({
宽度：data.map.width，
高度：data.map.height，
});
var newImg=$（“您是否检查过开发人员控制台是否有任何错误？可能的故障点太多了：您是否确实从服务器读取了json文件？它是否有语法错误？JS中是否有问题？您需要自己进行一些基本调试，对于这类事情，您的第一站应该始终是浏览器的debug/devel coNSLE。json文件在我的计算机中，与html文件在同一文件夹中。@belmart“json文件在我的计算机中”如果您尝试使用文件：//
，这可能就是问题所在。Ajax通常不允许使用。请设置本地HTTP服务器来承载页面和JSON文件。您尚未将画布添加到页面中。格式不正确的示例01.JSON:1类型错误：ctx.fillStyle不是函数示例CANV.html:33存在键入错误检查此项