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

画像を切り分けて数字を描画

  1. num.gif の画像は、0~9の数字が「60ピクセル*60ピクセル」で並んでいます。
    この画像を style タグで切り分けてカウンターを描画します。
    rect には num.gif を切り分ける座標を「上, 右, 下, 左」の順に指定します。
    (他の言語では、左上座標と右下座標の2点を指定することが多い)
    absolute は画像を描画する座標ですが、left の値に注意して下さい。
    left の値は num.gif 全体の左端座標を指定します。
    012を並べて描画するソースコードです。
    left が全て100ですが、重なることはありません。
    <img src="img/num.gif" style="clip:rect(0px,60px,60px,0px);position:absolute;left:100px;top:100px;">
    <img src="img/num.gif" style="clip:rect(0px,120px,60px,60px);position:absolute;left:100px;top:100px;">
    <img src="img/num.gif" style="clip:rect(0px,180px,60px,120px);position:absolute;left:100px;top:100px;">
    
    rect を左上座標と右下座標に置き換えると次のようになります。
    数字の画像左上座標 右下座標
    数字0 0,0 60,60
    数字1 60,0 120,60
    数字2 120,0 180,60
  2. 03を並べて描画してみます。
    3を left:100px で描画すれば、座標は2の隣になります。
    0の隣に並べるには二個分左(-120)に寄せなければなりません。
    left:-20px; に注目して下さい。
    <img src="img/num.gif" style="clip:rect(0px,60px,60px,0px);position:absolute;left:100px;top:100px;">
    <img src="img/num.gif" style="clip:rect(0px,240px,60px,180px);position:absolute;left:-20px;top:100px;">
    
  3. このことを考慮して作成した View_Num(num) 関数です。
    left の座標(left:100-num*60)に注目して下さい。
    数字は左上座標を基点として x=100, y=100 の座標に描画されます。
    <script type="text/javascript">
      function View_Num(num)
      {
        var pos = num*60;
        var s1 = '(0px,' + (pos+60) + 'px,60px,' + pos + 'px)';
        var s2 = 'left:' + (100-pos) + 'px;top:100px;">';
        var s = '<img src="img/num.gif" style="clip:rect' + s1 + '; position:absolute;' + s2;
        window.alert(s);
        document.write(s);
      }
    </script>
    </head>
    
  4. body から View_Num() 関数を呼び出します。
    数字の画像は x=100, y=100 の座標に重ねて描画されます。
    <body>
    <h1>数字の画像を切り分ける</h1>
    <script type="text/javascript">
        //View_Num(0);
        //View_Num(2);
        View_Num(5);
        //View_Num(8);
    </script>
    
    </body>
    </html>
    
  5. 数字の画像を切り分ける をクリックすると0~9の数字を切り分けて描画します。
    全ての数字が重なって描画されるので、ソースコードを修正して他の数字も確かめて下さい。

カウンターを描画

  1. 数字の画像を並べてカウンターを描画します。
    View_Num() 関数に描画座標のパラメータ(x, y)を追加します。
      function View_Num(num, x, y)
      {
        var pos = num*60;
        var s1 = '(0px,' + (pos+60) + 'px,60px,' + pos + 'px)';
        var s2 = 'left:' + (x-pos) + 'px;top:' + y + 'px;">';
        var s = '<img src="img/num.gif" style="clip:rect' + s1 + '; position:absolute;' + s2;
        //window.alert(s);
        document.write(s);
      }
    
  2. body から View_Num() 関数を呼び出します。
    143の数字を並べて描画します。
    <script type="text/javascript">
        View_Num(1,60,100);
        View_Num(4,120,100);
        View_Num(3,180,100);
    </script>
    
  3. カウンターを描画する View_Cnt() 関数です。
    cnt がカウンターで、下位の桁から6桁で描画します。
      function View_Cnt(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);
        }
      }
    
  4. body から View_Cnt() 関数を呼び出します。
    <script type="text/javascript">
        //View_Num(1,60,100);
        //View_Num(4,120,100);
        //View_Num(3,180,100);
        View_Cnt(14375);
    </script>
    
  5. 画像を切り分けてカウントを描画 をクリックすると0~9の画像を組み合わせてカウンターが6桁で描画されます。
    カウンターの値を変えて確かめて下さい。

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