1

我正在尝试将不同的图像应用于多个画布。

图像被传递到在后面的代码中生成的 json 数组中，然后通过绘图循环到特定的画布。

现在这似乎有时会起作用，有时会渲染有时不会。

所以这里是代码。

function renderPlayer() {
        var imagesList = <%=imageList %>;
        var size = imagesList.length;
        for(var key in imagesList)
        {
            var image = imagesList[key][1];
            var gridPosition = imagesList[key][0];
            var playerCanvas = document.getElementById(gridPosition);
            window.context2 = playerCanvas.getContext("2d");
            //context2.save();
            playerCanvas.setAttribute("width", 97);
            var imageObj = new Image();
            imageObj.src = image;
            context2.drawImage(imageObj, 0, 10, 97, 97);
         }
    }

上面的代码将它们放置在我期望它们的位置，但不是每次呈现页面时。

然而，下面的代码似乎只渲染最后一张图像。

        function renderPlayer() {
        var imagesList = <%=imageList %>;
        var size = imagesList.length;
        for(var key in imagesList)
        {
            var image = imagesList[key][1];
            var gridPosition = imagesList[key][0];
            var playerCanvas = document.getElementById(gridPosition);
            window.context2 = playerCanvas.getContext("2d");
            //context2.save();
            playerCanvas.setAttribute("width", 97);
            var imageObj = new Image();
            imageObj.onload = function(){
            context2.drawImage(imageObj, 0, 10, 97, 97);
            };
            imageObj.src = image;

         }
    }

有没有人有任何建议为什么这可能不起作用？

4

2 回答 2

0

第一个示例失败了，因为您需要等待图像加载后才能在画布中绘制它。随机性是由于有时图像会在您运行context2.drawImage(..)命令时加载而有时不会，通过将此代码放在onload图像的处理程序中，您应该保证图像数据存在。

第二个例子看起来更好，但你应该改变onLoad并onload移动线条

var playerCanvas = document.getElementById(gridPosition);
var context2 = playerCanvas.getContext("2d");

在for循环之外，还要注意对第二行的更改。

于 2013-04-11T14:13:40.543 回答
0

同样的老问题......你所有的图像onload方法都引用了一个，并且imageObj每次循环都会被覆盖。 

for(var key in imagesList)
{
    var image = imagesList[key][1];
    var gridPosition = imagesList[key][0];
    var playerCanvas = document.getElementById(gridPosition);
    window.context2 = playerCanvas.getContext("2d");
    //context2.save();
    playerCanvas.setAttribute("width", 97);
    (function(){
        var imageObj = new Image();
        imageObj.onload = function(){
           context2.drawImage(imageObj, 0, 10, 97, 97);
        };
        imageObj.src = image;
    })();
 }

通过包装在一个立即执行的功能块中，每个都imageObj成为它自己的变量，每个 onload 函数都会捕获它。

于 2013-04-11T14:15:43.427 回答