0

I have a JSON array that I am receiving from PHP the array is an indexed array and is in this format only larger

 [
        [
            [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"]
        ]
    ]

This json array is then processed as follows. While I can alert out the values from the data array, when I enter the values into the drawImage parameters I receive the following console error in firebug:

TypeError: Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement.

alert(typeof data); //object

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

});

Why are the parameters for the drawImage not working??

4

1 回答 1

1

When you ask for this: 

data[nextFrame][m][3]

You are literally getting the letter “r”, not the image held in the variable “r”.

There are many ways to save/recall the image “r” by its index-letter.

Here is one way using an object (called images) and adding an element called "r" that holds the image.

// 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, there is a bug in Chrome that requires createElement instead of new Image(). That's why I use createElement here.

Then you can get the “r” image for your drawImage using index "letter-r" like this:

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

So then we plug in your JSON and this works just fine:

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

Here is code and a Fiddle: 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>
于 2013-06-07T20:14:34.873 回答