JavaScriptとCanvasで画像の一部を切り出して表示

HTMLのCanvasで座標を指定して画像ファイルを表示することが出来るようなので、一つの画像ファイルを6分割し一コマ一コマ表示してみました。
表示された画像をクリックすると次のコマが表示されます。

ソースコード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>koma</title>
        <script>
            var img = new Image();
            var drawInfo = [
                {
                    src: '../images/koma.png',
                    sx: 150,
                    sy: 0,
                    sw: 150,
                    sh: 133,
                },
                {
                    src: '../images/koma.png',
                    sx: 150,
                    sy: 133,
                    sw: 150,
                    sh: 133,
                },
                {
                    src: '../images/koma.png',
                    sx: 150,
                    sy: 266,
                    sw: 150,
                    sh: 133,
                },
                {
                    src: '../images/koma.png',
                    sx: 0,
                    sy: 0,
                    sw: 150,
                    sh: 133,
                },
                {
                    src: '../images/koma.png',
                    sx: 0,
                    sy: 133,
                    sw: 150,
                    sh: 133,
                },
                {
                    src: '../images/koma.png',
                    sx: 0,
                    sy: 266,
                    sw: 150,
                    sh: 133,
                },
            ]

            var imgList = [];

            for (let i = 0; i < drawInfo.length; i++) {
                var img = new Image();
                img.src = drawInfo[i].src;
                imgList.push(img);
            }

            var index = 0;
        </script>
    </head>
    <body onload='init()'>
        <canvas id='cv1' style='width: 100%;height: 100%;'></canvas>
        <script>
            
            function draw1(){
                var ctx = document.getElementById("cv1").getContext("2d");
                var sx = drawInfo[index].sx;
                var sy = drawInfo[index].sy;
                var sw = drawInfo[index].sw;
                var sh = drawInfo[index].sh;

                var cw = document.documentElement.clientWidth;
                var ch = document.documentElement.clientHeight;

                document.getElementById("cv1").width = cw;
                document.getElementById("cv1").height = ch;


                var dx = 0;
                var dy = 0;
                var dw = 0;
                var dh = 0;

                if (ch > cw) {
                    // 幅基準
                    dw = cw;
                    dh = Math.round(sh * (cw / sw));

                    dy = Math.round((ch - dh)/2);
                }
                else {
                    // 高さ基準
                    dw = Math.round(sw * (ch / sh));
                    dh = ch;

                    dx = Math.round((cw - dw)/2);
                }

                ctx.drawImage(imgList[index],sx,sy,sw,sh,dx,dy,dw,dh);
            }

            function init(){
                document.getElementById("cv1").onclick = function() {
                    index++;
                    if (index >= drawInfo.length){
                        index = 0;
                    }
                    
                    draw1();
                };
                
                draw1();
            }
            
        </script>
    </body>
</html>

コメント