从JSON数据画布drawImage

Question

I have a JSON array that I am receiving from PHP the array is an indexed array and is in this format only larger 我有一个从PHP接收到的JSON数组，该数组是索引数组，并且此格式仅较大

 [
        [
            [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. 然后，按以下方式处理此json数组。 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: 虽然我可以从数据数组中警告值，但是当我将值输入到drawImage参数中时，我在firebug中收到以下控制台错误：

TypeError: Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement. TypeError：值无法转换为以下任何一种：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?? 为什么drawImage的参数不起作用？

Answer 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”. 您实际上得到的是字母“ r”，而不是变量“ r”中保存的图像。

There are many ways to save/recall the image “r” by its index-letter. 有很多方法可以通过索引字母保存/调用图像“ r”。

Here is one way using an object (called images) and adding an element called "r" that holds the image. 这是使用对象（称为图像）并添加包含图像的元素“ 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, there is a bug in Chrome that requires createElement instead of new Image(). 顺便说一句，Chrome中存在一个错误，该错误需要createElement而不是new Image（）。 That's why I use createElement here. 这就是为什么我在这里使用createElement的原因。

Then you can get the “r” image for your drawImage using index "letter-r" like this: 然后，您可以使用索引“ letter-r”为drawImage获取“ r”图像，如下所示：

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

So then we plug in your JSON and this works just fine: 因此，然后我们插入您的JSON，就可以了：

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

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/mE9VC/ 这是代码和小提琴： 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数据画布drawImage

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-06-07 20:14:34

从JSON数据画布drawImage

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-06-07 20:14:34

解决方案1
1 已采纳 2013-06-07 20:14:34