Canvas从json数据中绘制图像

Canvas drawImage from json data

本文关键字：绘制 图像 数据 json Canvas      更新时间：2023-09-26

我有一个从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"]
        ]
    ]

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

TypeError: Value could not convert to any of: htmllimageelement, HTMLCanvasElement, HTMLVideoElement.

警报(typeof数据);//对象

$(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的参数不工作?

当你要求这个时:

data[nextFrame][m][3]

你实际上得到的是字母"r"，而不是变量"r"中保存的图像。

有很多方法可以保存/调用图像" r "的索引字母。

有一种方法是使用一个对象(称为images)并添加一个名为"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，有一个bug在Chrome需要createElement而不是new Image()。这就是为什么我在这里使用createElement。

然后你可以得到"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>
相关文章：