多画布图像随机出现

我想将不同的图像应用于多个画布。多画布图像随机出现

图像被传递到一个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; 

     } 
    }

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

来源

2013-04-11 Dashwall

同样的老问题......你的所有图像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-11 14:15:43 JayC

感谢这个JayC。只有一个图像出现在浏览器中的问题仍然存在，但是当我逐步浏览Chrome中的代码时，所有3个图像都像我期望的那样出现，而不是正常运行。 – Dashwall 2013-04-11 14:34:27

为什么我们要为这三个图像发出完全相同的'drawImage'命令，是否有任何理由？图纸应该是连续的，但延迟？我在这里错过了一些东西。 – JayC 2013-04-11 16:36:00

是的，实际上这是正确的答案，所有缺少的是在即时执行函数中传递我需要的变量。所以在我的情况下，它是需要在两个括号内的context2和image。十分感谢你的帮助。 – Dashwall 2013-04-12 07:20:45

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

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

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

的for循环外，还要注意切换到第二行。

来源

2013-04-11 14:13:40 codebox

对不起第二个例子实际上是由我自己加载一个错字 – Dashwall 2013-04-11 14:16:37

多画布图像随机出现

回答

相关问题