如何在 html canvas 上循环绘制图像

Question

我正在尝试在 canvas 上循环绘制图像

在下面的代码中，如果我点击下一张，5张图片会一个接一个地出现。如果我点击全部只显示最后一张图片

怎么了？

<html>
<head>
    <style>
        .display-grid{
            display: grid;
            grid-template-columns: auto auto auto auto;
            padding: 10px;
        }
    </style>
</head>
<body>

    <div id="my-grid">
        <div class="display-grid">
            <span><canvas class="canvas" id="display-0"></canvas></span>
            <span><canvas class="canvas" id="display-1"></canvas></span>
            <span><canvas class="canvas" id="display-2"></canvas></span>
            <span><canvas class="canvas" id="display-3"></canvas></span>
            <span><canvas class="canvas" id="display-4"></canvas></span>
        </div>
    </div>
    <button id="next-image">Next</button>
    <button id="all-images">All</button>

<script type="text/javascript">
    last_image = -1
    var next_button= document.getElementById('next-image');
    var all_button= document.getElementById('all-images');
    next_button.onclick = function(){nextImage()};
    all_button.onclick = function(){allImages()};

    function nextImage() {
        last_image ++
        var canvas = document.getElementById('display-'+last_image.toString());
        var context = canvas.getContext('2d');
        var imageObj = new Image();

        imageObj.onload = function() {
            context.drawImage(imageObj, 0, 0);
        };
        imageObj.src = 'image_'+last_image.toString()+'.png';
    }

    function allImages() {
        for (index = 0; index < 5; index++) {
            var canvas = document.getElementById('display-'+index.toString());
            var context = canvas.getContext('2d');
            var imageObj = new Image();

            imageObj.onload = function() {
                context.drawImage(imageObj, 0, 0);
            };
            imageObj.src = 'image_'+index.toString()+'.png';
        }
    }
</script>

</body>
</html>

Answer 1

这是因为 onload 函数的调用顺序与循环不同。某些图片的加载时间可能比其他图片长。

您可以通过检查图片名称来了解加载了哪个图片，然后您就知道应该在哪个 canvas 中绘制它。

function allImages() {
    for (let index = 0; index < 5; index++) {
        let imageObj = new Image();
        imageObj.name = "display-"+index

        imageObj.onload = function() {
            console.log("loaded : " + this.name)
            let canvas = document.getElementById(this.name);
            let context = canvas.getContext('2d');
            context.drawImage(this, 0, 0);
        };

        imageObj.src = 'image_'+index+'.png';
    }
}

如何在 html canvas 上循环绘制图像

How to draw images on an html canvas in a loop

javascript

html5-canvas