HTML5 캔버스에 여러 이미지를 임의의 순서로 표시

16059 단어 HTML5자바스크립트캔버스

개요



HTML5 캔버스 안에 하나의 이미지를 표시하는 것은 간단합니다.
복수의 화상을 표시하는 것도 상당히 간단합니다만, 이것을 임의의 순서로 표시하려고 하면 조금 궁리가 필요했습니다.

우선은 1장의 화상을 표시해 봅니다.



자바스크립트
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
(function() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    var image = new Image();
    image.src = '1.png';
    image.addEventListener('load', function() {
        context.drawImage(image, 0, 0, 150, 100);
    }, false);
})();
</script>
</body>

문제없이 표시됩니다.





다음에 같은 요령으로, 4장의 화상을 좌상으로부터 순서에 조금씩 어긋나게 겹치도록 표시해 보고 싶습니다.



자바스크립트
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
(function() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    var image1 = new Image();
    image1.src = '1.png';
    image1.addEventListener('load', function() {
        context.drawImage(image1, 0, 0, 150, 100);
    }, false);

    var image2 = new Image();
    image2.src = '2.png';
    image2.addEventListener('load', function() {
        context.drawImage(image2, 50, 70, 150, 100);
    }, false);

    var image3 = new Image();
    image3.src = '3.png';
    image3.addEventListener('load', function() {
        context.drawImage(image3, 100, 140, 150, 100);
    }, false);

    var image4 = new Image();
    image4.src = '4.png';
    image4.addEventListener('load', function() {
        context.drawImage(image4, 150, 210, 150, 100);
    }, false);
})();
</script>
</body>

단순히 동일한 처리를 연속적으로 쓰면 이미지의 크기에 따라 로드 순서가 보장되지 않으므로 작동하지 않는 패턴이 발생합니다. 아무래도, 2장째, 4장째보다 1장째와 3매째가 나중에 읽혀졌기 때문에, 이러한 표시가 되어 있는 것 같습니다.





이미지 사이즈에 따라 로드 순서가 바뀔 수 있다는 것을 알았으므로 이번에는 4장의 이미지 로드가 끝난 시점에서 표시를 하도록 합니다.



자바스크립트
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
(function() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    var srcs = [
        '1.png',
        '2.png',
        '3.png',
        '4.png',
    ];
    var images = [];
    for (var i in srcs) {
        images[i] = new Image();
        images[i].src = srcs[i];
    }

    var loadedCount = 1;
    for (var i in images) {
        images[i].addEventListener('load', function() {
            if (loadedCount == images.length) {
                var x = 0;
                var y = 0;
                for (var j in images) {
                    context.drawImage(images[j], x, y, 150, 100);
                    x += 50;
                    y += 70;
                }
            }
            loadedCount++;
        }, false);
    }
})();
</script>
</body>

기대하는 표시가 되었습니다.



Canvas로 이미지 밝기 조정 (γ 보정)
캔버스로 이미지 이진화

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage