Javascript でプログレスバーを作る

　web ページ上に進行状況を表示するためにプログレスバーを作りたくなりました。Canvas を使えば javascript で作れると考えました。

　Canvas は使ったことがあるのですが、プログレスバーのサイズを可変にしたいと思ったところ、canvas タグでは可変にできないことがわかりました。css と組み合わせることで可変にできます。

　Canvas でプログレスバーを実装した後、調べてみれば、progress タグで実現できることがわかりました。こちらの方が簡単です。

Canvas

　canvas タグで指定したサイズは、描画領域の仮想的なサイズのようです。css でサイズの指定をしない場合は、この仮想的なサイズと表示上のサイズは同じになります。

　ところが、css でサイズを指定すると、表示上のサイズと描画領域の仮想的なサイズに違いが出ます。Javascript で canvas に描画する際には、描画領域の仮想的なサイズをもとに描画します。

　なぜ css でサイズを指定しようとしたのかといえば、通常の要素のサイズ指定は css ですべきだと考えているからです。html のタグでは文章の構造を示し、サイズや色などの見た目は css で整えると学びました。

　また、Canvas タグで指定するサイズに可変サイズは指定できません。例えば、css で幅を 100% にした場合は、ウィンドウサイズによって伸び縮みします。

以下のような css と html の場合を試してみます。

Canvas のサイズ

css

    .drawarea {
        border: 1px solid #040;
        color: #0ff;
        background-color: #0f0;
    }
    #drawarea1 {
    }
    #drawarea2 {
    }
    #drawarea3 {
        width: 200px;
        height: 10px;
    }
    #drawarea4 {
        width: 100%;
        height: 10px;
    }

html

    <div>サイズ指定なしでCanvas を作成</div>
    <canvas id="drawarea1" class="drawarea">描画領域</canvas>
    Canvas サイズ：<span id="size1"></span>
    <div>canvas タグで width と height を指定(200 x 100)</div>
    <canvas id="drawarea2" class="drawarea" width="200" height="100">描画領域</canvas>
    Canvas サイズ：<span id="size2"></span>
    <div>css で width と height を指定(200px x 10px)</div>
    <canvas id="drawarea3" class="drawarea">描画領域</canvas>
    Canvas サイズ：<span id="size3"></span>
    <div>タグ(200 x 10)と css(100% x 10px) で width と height を指定</div>
    <canvas id="drawarea4" width="200" height="10" class="drawarea">描画領域</canvas>
    Canvas サイズ：<span id="size4"></span>

javascript

    <script>
        let n = 0;
        let canvas1 = document.getElementById('drawarea1');
        let canvas2 = document.getElementById('drawarea2');
        let canvas3 = document.getElementById('drawarea3');
        let canvas4 = document.getElementById('drawarea4');
        document.getElementById('size1').innerHTML = canvas1.width+' x '+canvas1.height;
        document.getElementById('size2').innerHTML = canvas2.width+' x '+canvas2.height;
        document.getElementById('size3').innerHTML = canvas3.width+' x '+canvas3.height;
        document.getElementById('size4').innerHTML = canvas4.width+' x '+canvas4.height;
    </script>

　この結果、次のように表示されます。

プログレスバー

　Canvas を使ったプログレスバーは次のように作ります。

css

    #progressbar {
        width: 100%;
        height: 5px;
        border: 1px solid #040;
        color: #0ff;
        background-color: #0f0;
    }

html

    <canvas id="progressbar" width="200" height="5">進行状況</canvas>

javascript

    <script>
        let n = 0;
        setInterval(progressbar, 1000);
        function progressbar() {
            let canvas = document.getElementById('drawarea5');
            if( canvas.getContext ) {
                let ctx = canvas.getContext('2d');
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.fillRect(0, 0, canvas.width*n/100, canvas.height);
            }
            n = (n+1) % 101;
        }

Progress タグ

　progress タグを使えば簡単にできます。

css

    #progressbar {
        width: 100%;
    }

html

    <progress id="progressbar" value="0" max="100">プログレスバー</progress>

javascript

    <script>
        let n = 0;
        setInterval(progressbar, 1000);
        function progressbar() {
            document.getElementById('progressbar').value = n;
            n = (n+1) % 101;
        }
    </script>

　Canvas で苦労する必要はなかったようです。

web サイト

Posted by sirius