Question

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

将图像传递到后面的代码中生成的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;

         }
    }

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

Answer 1

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

第二个示例看起来更好，但您应该将onLoad更改为onload并移动行

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

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

Answer 2

相同的旧问题...所有图像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函数捕获。

多个画布图像随机出现

2 个答案: