数字の画像でカウンターを描画

数字の画像を切り分けてカウンターを描画

num.gif の画像は、０～９の数字が「60ピクセル*60ピクセル」で並んでいます。
この画像を style タグで切り分けてカウンターを描画します。
rect には num.gif を切り分ける座標を「上, 右, 下, 左」の順に指定します。
(他の言語では「左上座標と右下座標」または「左上座標と幅と高さ」を指定することが多い)
スタイルシートの基本は自由に配置を参照して下さい。

次の例は０１２を並べて描画するソースコードです。
clip:rect() で描画する数字を切り出します。
absolute の left: と top: が画像を描画する座標ですが、left: top: 共にゼロが設定されています。
所が数字が重なることはありません。

<img src="img/num.gif" style="clip:rect(0px,60px,60px,0px);position:absolute;left:0px;top:0px;">
<img src="img/num.gif" style="clip:rect(0px,120px,60px,60px);position:absolute;left:0px;top:0px;">
<img src="img/num.gif" style="clip:rect(0px,180px,60px,120px);position:absolute;left:0px;top:0px;">

実は left: と top: の値は、num.gif 全体の左端座標を基準に指定します。
実際に描画されるＸ座標は次のようになります。
(一行に並んでいるのでＹ座標(top:)は常にゼロになる)

数字	画像内のＸ座標	描画されるＸ座標
数字０	0	0
数字１	60	60
数字２	120	120

０５を並べて描画してみます。
５を left:0px で描画すれば、座標は 300 の位置に描画されます。
０の隣(X=60)に並べるには 60-300=-240 で 240ピクセル左に寄せなければなりません。
<img src="img/num.gif" style="clip:rect(0px,60px,60px,0px);position:absolute;left:0px;top:0px;"> <img src="img/num.gif" style="clip:rect(0px,360px,60px,300px);position:absolute;left:-240px;top:0px;">

View_Zero(num) 関数では、num で指定した０～９の数字が座標 0,0 に描画されます。

    // 数字 num を座標 0,0 に描画
    function View_Zero(num)
    {   var pos = num*60;
        var s1= 'style="clip:rect(0px,' + (pos+60) + 'px,60px,' + pos + 'px);';
        var s2 = 'position:absolute;left:' + (0-pos) + 'px;top:0px;';
        var s = '<img src="img/num.gif"' + s1 + s2 + '">';
        document.write(s);
    }

body から View_Zero() 関数を呼び出します。
複数の数字を描画すると重なるので注意して下さい。
<script type="text/javascript"> View_Zero(0); View_Zero(3); View_Zero(8); </script>

View_Num(num, x, y) 関数では、num で指定した０～９の数字が座標 x,y に描画します。

    //「上, 右, 下, 左」の順
    function View_Num(num, x, y)
    {   var pos = num*60;
        var s1= 'style="clip:rect(0px,' + (pos+60) + 'px,60px,' + pos + 'px);';
        var s2 = 'position:absolute;left:' + (x-pos) + 'px;top:' + y + 'px;';
        var s = '<img src="img/num.gif"' + s1 + s2 + '">';
        //window.alert(s);
        document.write(s);
    }

body から View_Num() 関数を呼び出します。
321 が並んで描画されます。

<script type="text/javascript">
    View_Num(3,100,100);
    View_Num(2,160,100);
    View_Num(1,220,100);
</script>

カウンターを描画

数字の画像を並べてカウンターを描画します。

    // ６桁でカウンターを描画
    function View_Count(cnt)
    {   var i,w,c;
        w= cnt;
        for(i=0; i<6; i++)
        {  c= w%10;             //下位の桁から取り出す
           w= parseInt(w/10);
           View_Num(c, 360-i*60,100);
        }
    }

カウンターを描画する View_Count() 関数です。
cnt がカウンターで、下位の桁から６桁で描画します。
View_Num(c, 360-i*60,100); で View_Num() を呼び出します。
Ｘ座標は 60 を基準に 60 の幅で描画されます。

body から View_Count() 関数を呼び出します。

<script type="text/javascript">
    View_Count(14375);
</script>

画像を切り分けてカウントを描画をクリックすると０～９の画像を組み合わせてカウンターが６桁で描画されます。
カウンターの値を変えて確かめて下さい。
Count Class でヒットポイントなど汎用的な数字を表示するクラスを作成します。

前田稔の超初心者のプログラム入門
 超初心者のプログラム入門(PHP)