Question

有人可以帮助使下面的代码工作。还有没有其他方法来显示图像而不使用onload？

<head id="Head1" runat="server">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>


    <script type="text/javascript">
        $(document).ready(function () {

            var c = document.getElementById("myCanvas");
            c.width = $(document).width();
            c.height = $(document).height();
            var ctx = c.getContext("2d");
            var imgArray = new Array();

            imgArray[0] = new Image();
            imgArray[1] = new Image();
            imgArray[0].src = "1.png";
            imgArray[1].src = "2.png";
            var x = 30;
            var y = 40;
            for (var i = 0; i < 2; i++) {
                imgArray[i].onload = function () {


                    ctx.drawImage(imgArray[i], x, y);

                }
                x = x + 20;
            } 
        });

    </script>  
</head>

我希望使用数组在画布上显示图像。如果我使用没有for循环的数组，它工作正常。请帮助解决问题。

<body style="margin:0; height:100%; width:100%; overflow:hidden;" >  
 <canvas id="myCanvas"  style="display:block; "   >
     Your browser does not support the HTML5 canvas tag.
  </canvas> 
</body>
</html>

Answer 1

在循环中定义函数是不好的做法。尝试使用命名函数在循环外部定义它。另外，在附加onload函数后设置img的src可能更好。类似的东西：

$(document).ready(function () {

    var c = document.getElementById("myCanvas");
    c.width = $(document).width();
    c.height = $(document).height();
    var ctx = c.getContext("2d");
    var imgArray = new Array();

    imgArray[0] = new Image();
    imgArray[1] = new Image();
    var x = 30;
    var y = 40;

    function onImageLoad() {
        ctx.drawImage(this, x, y);
        x = x + 20;
    }

    for (var i = 0; i < 2; i++) {
        imgArray[i].onload = onImageLoad;
    } 

    imgArray[0].src = "1.png";
    imgArray[1].src = "2.png";
});

如果你必须在函数中使用循环（你不会），你需要将它包装在一个闭包中，这样每个图像都可以获得它自己的onload函数，而不是定义相同的函数这就是你的情况。

类似于以下内容可能会起作用：

for (var i = 0; i < 2; i++) {
    imgArray[i].onload = (function(idx) {
        return function() {
            ctx.drawImage(imgArray[idx], x, y);
            x = x + 20;
        }
    })(i)
}

Answer 2

这就是你可以做的事情：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function()
{
    // Source
    var imgArray = new Array();
    imgArray[0] = new Image();
    imgArray[1] = new Image();
    imgArray[0].src = "http://png-2.findicons.com/files/icons/963/very_emotional_emoticons/64/64_18.png";
    imgArray[1].src = "http://png-3.findicons.com/files/icons/963/very_emotional_emoticons/64/64_30.png";

    // Draw Images
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var startX = 0;
    for (var i = 0; i < imgArray.length; i++) {
        ctx.drawImage(imgArray[i], startX, 0);
        startX += 74;
    }
});

</script>

<canvas id="myCanvas"  style="display:block;">
     Your browser does not support the HTML5 canvas tag.
</canvas>

输出：

enter image description here

P.S。图像为64x64（宽x高）。因此，要以10px的间距将它们彼此相邻绘制，我会添加10到64（宽度），因此我会startX += 74;并且图像会像那样绘制。

您应该能够修改此代码以满足您自己的需求。

画布中的图像数组不起作用

2 个答案: