Question

我有一个JSON数组，我从PHP接收数组是一个索引数组，并且只有更大的格式

 [
        [
            [17, 28, 1, "z"],
            [28, 31, 6, "b"],
            [8, 29, 6, "b"]
        ],
        [
            [19, 28, 1, "z"],
            [17, 25, 6, "b"],
            [19, 25, 6, "b"],
            [27, 32, 6, "b"],
            [9, 28, 6, "b"]
        ]
    ]

然后按如下方式处理该json数组。虽然我可以提醒数据数组中的值，但当我在drawImage参数中输入值时，我在firebug中收到以下控制台错误：

TypeError：无法将值转换为以下任何值：HTMLImageElement，HTMLCanvasElement，HTMLVideoElement。

警报（数据类型）; //对象

$(document).ready(function() {
        canvas = document.getElementById("myCanvas");
        ctx = canvas.getContext("2d");

            r = new Image()
            r.src = 'graphics/redsprites.png';
            image2 = new Image()
            image2.src = 'graphics/pitch.png';
            b = new Image()
            b.src = 'graphics/bluesprites.png';
            z = new Image()
            z.src = 'graphics/zoxball.png';
            var nextFrame =0;
            var m;

    foo(function(data) {
            alert(typeof data);
            var draw = function(){
            ctx.clearRect(0, 0, 1080, 1680);
            ctx.drawImage(image2, 0, 0, 622, 924, 0, 0, 1080, 1680);
            if (nextFrame<=10){
                for(m = 0; m <=22; m++)//23 is 22 players plus ball
                {
                alert(m);
                alert(nextFrame);
                alert(data[nextFrame][m][0]);
                alert(data[nextFrame][m][1]);
                alert(data[nextFrame][m][3]);
                ctx.drawImage(data[nextFrame][m][3], 0, 0, 100, 100, data[nextFrame][m][0], data[nextFrame][m][1], 25, 25);
                }
            }else{
                clearTimeout(draw);
            }
            nextFrame++;        
            }
            setInterval(draw,1000); 

        }); 


    function foo(callback) {
        $.ajax({
                type: "POST",
                url: "matchEngine.php",
                success:function(data) {

                    for (var i = 0, len= data.length;i <len; i++) {
                    for ( h = 0, len2= data[i].length;h <len2; h++) {
                    //alert("am here!!");
                    data[i][h][0]=(data[i][h][0])*30;
                    data[i][h][1]=(data[i][h][1])*30;
                    data[i][h][3]=data[i][h][3].replace(/\"/,"");
                    }
                    }
                    callback(data);
            }
        });
    }

});

为什么drawImage的参数不起作用？

Answer 1

当你问这个时：

data[nextFrame][m][3]

你真的得到字母“r”，而不是变量“r”中的图像。

有许多方法可以通过索引字母保存/调用图像“r”。

这是一种使用对象（称为图像）并添加一个名为“r”的元素来保存图像的方法。

// declare a new object that will host all of our images

    var images=new Object();

// add a new imagecalled “r” to the images object

    images.r=document.createElement("img");
    images.r.src=”graphics/redsprites.png”;

BTW，Chrome中存在一个需要createElement而不是new Image（）的错误。这就是我在这里使用createElement的原因。

然后你可以使用索引“letter-r”为你的drawImage获取“r”图像：

ctx.drawImage( images["r"], 0,0);

然后我们插入你的JSON，这很好用：

ctx.drawImage(images[  data[nextFrame][m][3]]  ], 0, 0);

这是代码和小提琴：http://jsfiddle.net/m1erickson/mE9VC/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var images=new Object();
    images.r=document.createElement("img");
    images.r.onload=function(){

        ctx.drawImage(images['r'],0,0);

    }
    images.r.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png";


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

来自json数据的Canvas drawImage

1 个答案: