Блог

Главная - Вопросы по программированию - Как рисовать изображения на html-холсте в цикле

Как рисовать изображения на html-холсте в цикле

#javascript #html5-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>

Ответ №1:

Это происходит потому onload , что функция вызывается не в том же порядке, что и цикл. Для загрузки некоторых изображений может потребоваться больше времени, чем для загрузки других.

Вы можете исправить это, проверив имя изображения, чтобы узнать, какое изображение загружено, а затем узнать, на каком холсте оно должно быть нарисовано.

 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';
    }
}
Метки: