Fatal编程技术网
  • javascript/
  • Javascript 无法在具有for循环的画布中创建图像

Javascript 无法在具有for循环的画布中创建图像

javascript canvas

Javascript 无法在具有for循环的画布中创建图像,javascript,canvas,Javascript,Canvas,我有下面的代码，可以执行以下操作： 在html页面上动态创建2个画布元素（这很好） 对于每个Canvas元素，检查allSteps变量，该变量表示哪些图像应显示在Canvas元素的哪个位置。在这个硬编码的示例中，它应该在第一个画布的底部显示两个黑框，在第二个画布的底部显示两个棕色框。（这不能正常工作）。所有图像均为50x50 出于某种原因，它只在第二个画布的末尾加载一个图像 <!DOCTYPE html> <html> <head> <script

我有下面的代码，可以执行以下操作：

  • 在html页面上动态创建2个画布元素（这很好）
  • 对于每个Canvas元素，检查allSteps变量，该变量表示哪些图像应显示在Canvas元素的哪个位置。在这个硬编码的示例中，它应该在第一个画布的底部显示两个黑框，在第二个画布的底部显示两个棕色框。（这不能正常工作）。所有图像均为50x50
    • 出于某种原因，它只在第二个画布的末尾加载一个图像

    <!DOCTYPE html>
<html>
<head>
   <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   $(document).ready(function() {

        var boxImages = ['img/white.jpg', 'img/blue.jpg', 'img/black.jpg', 'img/brown.jpg', 'img/green.jpg', 'img/red.jpg'];
        var IMAGE_WIDTH=50;
        var MAX_COLS = 7;
        var MAX_ROWS = 8;
        var numberOfSteps = 2;
        var allSteps = [];
        allSteps[0] = '0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2 2';
        allSteps[1] = '0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 3';

        $('#result_div').html('<p>All Steps : ' + allSteps + '</p>');

        for (count=0; count < numberOfSteps; count++)
        {
            $('#result_div').append('<h3>Step : ' + count + '</h3>');
            $('#result_div').append('<p><canvas id="resultCanvas' + count + '" width="350" height="400" style="border:1px solid #c3c3c3;" ></p>');
            resultCanvas=document.getElementById('resultCanvas'+count);
            resultCtx = resultCanvas.getContext("2d");  

            currentSolution = allSteps[count].split(" ");
            for (r=0; r < MAX_ROWS; r++)    
            {
                for (c=0; c < MAX_COLS; c++)
                {
                    imgNumber=currentSolution[((r)*MAX_COLS)+c];
                    if (imgNumber != 0)
                    {                   

                        boxX = (c*IMAGE_WIDTH);
                        boxY = (r*IMAGE_WIDTH);
                        cimg=new Image();
                        cimg.onload = function(){resultCtx.drawImage(cimg,boxX,boxY);};
                        cimg.src=boxImages[imgNumber];  
                    }                           
                }
            }
        }
   });
   </script>
<body>

<div id="result_div"></div>


</script>
</body>
</html>

    
$（文档）.ready（函数（）{
var-boxImages=['img/white.jpg'、'img/blue.jpg'、'img/black.jpg'、'img/brown.jpg'、'img/green.jpg'、'img/red.jpg']；
var图像_宽度=50；
var MAX_COLS=7；
var MAX_ROWS=8；
var numberOfSteps=2；
var-allSteps=[]；
所有步骤[0]=“0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2”；
所有步骤[1]=“0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3”；
$（'#result_div'）.html（'所有步骤：'+allSteps+'
    '）；
对于（计数=0；计数
    '）；
resultCanvas=document.getElementById（'resultCanvas'+count）；
resultCtx=resultCanvas.getContext（“2d”）；
currentSolution=allSteps[count]。拆分（“”）；
对于（r=0；r
    我还没有测试过这个，但是我想你覆盖你的
    cimg.src
    和
    cimg.onload
    的速度比实际加载的图像要快。您是否尝试过使用图像数组

        var cimgs = [];

    var IMAGE_WIDTH=50;
    /*
        ...
    */

            if (imgNumber != 0)
            {                   

                boxX = (c*IMAGE_WIDTH);
                boxY = (r*IMAGE_WIDTH);
                cimgs.push(new Image());
                cimgs[cimgs.length - 1].onload = (function(img,x,y){
                    return function(){resultCtx.drawImage(img,x,y);};
                })(cimgs[cimgs.lenght - 1],boxX,boxY);
                cimgs[cimgs.length - 1].src = boxImages[imgNumber];  
            }                           
        }
    这也是我的猜测。在使用画布和图像时，在尝试绘制图像之前，应始终确保已为所有图像触发onload事件，因为如果尚未加载该事件，甚至可能导致错误。我对此进行了测试，但它不起作用。更改后，没有显示任何图像（与之前的图像相反）。我可以问一下为什么这里使用阵列吗？是否假定允许图像加载/渲染过程与循环同步？在绘制下一个图像之前，是否有其他方法确保已为图像触发onload事件？感谢大家迄今为止的帮助，我很乐意阅读任何参考资料，在那里我可以找到关于这个主题的更多信息。：）在此处找到解决方案：