JavaScript：1枚の画像を分割して表示していく

canvasに1枚の画像を分割して表示していくJavaScriptサンプル。

ソースコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
    <title>1枚の画像を分割して順番に表示</title>
</head>
<body>
    <main>
        <canvas id="canvas" width="600" height="600"></canvas>
    </main>
</body>
</html>

style.css

/* style.css */
@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}

body{
    display: grid;                  /* CSSグリッドを適用 */
    grid-template-columns: 100vw;   /* ビューポート幅最大 */
    grid-template-rows: 100vh;      /* ビューポート高さ最大 */
}

main{
    justify-self: center;   /* 横方向中央揃え */
    align-self: center;     /* 縦方向中央揃え */
}

main.js

// main.js

let canvas = null;      // キャンバス
let g = null;           // コンテキスト
let image;              // 読み込む画像
let blocks = [];        // 画像ブロック用
let currentNo = 0;      // 現在のブロック番号（表示用）

const $id = (id) => { return document.getElementById(id); };    // DOM取得用

// ブロックごとに表示する
function mainLoop(){
    // ブロック描画
    drawBlock(currentNo++);

    // 全て描画したら終了
    if(currentNo >= blocks.length){
        console.log("Finish.");
        return;
    }
    setTimeout(mainLoop, 1000);
}

// ブロック描画
function drawBlock(n){
    g.drawImage(image, blocks[n].sx, blocks[n].sy, blocks[n].sw, blocks[n].sh, blocks[n].dx, blocks[n].dy, blocks[n].dw, blocks[n].dh);
}

/*
 * 起動時の処理
 */
window.addEventListener("load", function(){
    // キャンバス情報取得
    canvas = $id("canvas");
    g = canvas.getContext("2d");

    // 画像情報取得
    image = new Image();
    image.src = "lego_rakuda.jpg";

    image.addEventListener("load", ()=>{
        console.log("image loaded.");
        // 画像を9分割する
        for(let y=0; y<3; y++){
            for(let x=0; x<3; x++){
                const block = {
                    sx: x*200, sy: y*200, sw: 200, sh: 200, // 元の画像の開始点(sx, sy), 描画幅と高さ(sw, sh)
                    dx: x*200, dy: y*200, dw: 200, dh: 200, // 描画位置(dx, dy), 描画幅と高さ(dw, dh)
                };
                // 分割データをblocks配列に保存
                blocks.push(block);
            }
        }
        mainLoop();
    });


});