无法使用 for 循环在画布中创建图像

Cannot create images in a canvas with for loop

本文关键字：布中创建图像循环 for 更新时间：2023-09-26

我有以下代码，它应该执行以下操作：

在 html 页面上动态创建 2 个 Canvas 元素（这工作正常）
对于每个 Canvas 元素，检查 allSteps 变量，该变量表示哪些图像应出现在画布元素的哪个位置。在此硬编码示例中，它应在第一个画布的底部显示两个黑框，在第二个画布的底部显示两个棕色框。（这无法正常工作）。所有图像均为 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>

我还没有测试过这个，但我想你覆盖你的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];  
            }                           
        }