GIF のデータ形式

大雑把に以下の並びになっています。

バイト位置	バイト数	内容
0	6	ヘッダ (Header)
6	7	論理画面記述子 (Logical Screen Descriptor)
(13)	-	（共通色表：存在する場合）
-	-	記述子 (Descriptor)
...	...	...
-	1	終端子 (Trailer)

ヘッダ (Header)

バイト位置	バイト数	内容
0	3	花押 (Signature)
3	3	版 (Version) : 「87a」または「89a」

花押 (Signature)

バイト位置	文字	10進	16進
0	'G'	71	0x47
1	'I'	73	0x49
2	'F'	70	0x46

版 (Version) 「87a」

バイト位置	文字	10進	16進
3	'8'	56	0x38
4	'7'	55	0x37
5	'a'	79	0x61

版 (Version) 「89a」

バイト位置	文字	10進	16進
3	'8'	56	0x38
4	'9'	57	0x39
5	'a'	79	0x61

論理画面記述子 (Logical Screen Descriptor)

バイト位置	内容
6	画面の幅の下位8ビット (Logical Screen Width)
7	画面の幅の上位8ビット (Logical Screen Width)
8	画面の高さの下位8ビット (Logical Screen Height)
9	画面の高さの上位8ビット (Logical Screen Height)
10	詰合情報 <Packed Fields>
11	背景色番号 (Background Color Index)
12	ピクセル縦横比 (Pixel Aspect Ratio)
(13)	（共通色表：存在する場合）　(Global Color Table)

詰合情報 <Packed Fields>

ビット位置	ビット数	内容	備考
0	3	共通色数のビット数 (Size of Global Color Table)	SGCT と略す
3	1	共通色表は重要度順になっている (Sort Flag)
4	3	論理画面の色解像度 (Color Resolution)	ビット数（1〜8）を（0〜7）とする
7	1	共通色表あり (Global Color Table Flag)

ピクセル縦横比 (Pixel Aspect Ratio)

計算式は次のとおり。

Aspect\ Ratio = \frac{ Pixel\ Aspect\ Ratio + 15 }{ 64 } = \frac{ 幅 } { 高 }

正方形 $\left[1:1\right]$ は $\left(Pixel\ Aspect\ Ratio = 49 \right)$ とする。

共通色表 (Global Color Table)

共有色表が存在する場合は $\left( n=2^{SGCT+1} \right)$ 個の色情報が必要です。

色番号	バイト位置（共通色表）	+0	+1	+2
$0$	$0$	R[0]	G[0]	B[0]
$1$	$3$	R[1]	G[1]	B[1]
...	...	...	...	...
$n-1$	$3(n-1)$	R[n-1]	G[n-1]	B[n-1]

$n$ は最大で $256$ です。

記述子 (Descriptor)

記述子には以下の種類があります。

先頭バイト値 (Descriptor)	後続バイト値 (Label)	内容
0x2C	-	画像記述子 (Image Descriptor)
0x3B	-	終端子 (Trailer)
0x21	必要	「89a」版による拡張
0x21	0xF9	図形制御拡張 (Graphic Control Extension)
0x21	0xFE	注釈拡張 (Comment Extension)
0x21	0x01	文字画面拡張 (Plain Text Extension)
0x21	0xFF	応用拡張 (Application Extension)

画像記述子 (Image Descriptor)

バイト位置（画像記述子）	内容
0	画像記述子 (Image Separator) : 0x2C (Image Descriptor)
1	画像の位置（左）の下位8ビット (Image Left Position)
2	画像の位置（左）の上位8ビット (Image Left Position)
3	画像の位置（上）の下位8ビット (Image Top Position)
4	画像の位置（上）の上位8ビット (Image Top Position)
5	画像の幅の下位8ビット (Image Width)
6	画像の幅の上位8ビット (Image Width)
7	画像の高さの下位8ビット (Image Height)
8	画像の高さの上位8ビット (Image Height)
9	詰合情報 <Packed Fields>
(10)	（固有色表：存在する場合）　(Local Color Table)
(?)	色番式画像 (Table Based Image Data)

詰合情報 <Packed Fields>

ビット位置	ビット数	内容	備考
0	3	固有色数のビット数 (Size of Local Color Table)	SLCT と略す
3	2	予約 (Reserved)
5	1	固有色表は重要度順になっている (Sort Flag)
6	1	縞状形式 (Interlace Flag)
7	1	固有色表あり (Local Color Table Flag)

縞状形式 (Interlace Flag)

縦方向を、次の順に並び替える。

先頭行(Y=0)から8行間隔
5行目(Y=4)から8行間隔
3行目(Y=2)から4行間隔
2行目(Y=1)から2行間隔

固有色表 (Local Color Table)

固有色表が存在する場合は $\left( n=2^{SLCT+1} \right)$ 個の色情報が必要です。

色番号	バイト位置（固有色表）	+0	+1	+2
$0$	$0$	R[0]	G[0]	B[0]
$1$	$3$	R[1]	G[1]	B[1]
...	...	...	...	...
$n-1$	$3(n-1)$	R[n-1]	G[n-1]	B[n-1]

$n$ は最大で $256$ です。

色番式画像 (Table Based Image Data)

バイト位置（色番式画像）	内容	備考
0	LZW 最小コード幅 (LZW Minimum Code Size)	LMCS と略す
1	圧縮画像（副塊情報形式 : Data Sub-blocks）	LZW 圧縮

圧縮画像

画像の幅と高さを $w,h$ とすると $(w \times h)$ 個の色番号表が画像データとなります。

＼	0	1	...	w-1
0	$c_0$	$c_1$	...	$c_{w-1}$
1	$c_w$	$c_{w+1}$	...	$c_{2w-1}$
...	...	...	...	...
h-1	$c_{w(h-1)}$	$c_{w(h-1)+1}$	...	$c_{w h - 1}$

圧縮画像は、画像データを LZW アルゴリズムで圧縮して副塊情報形式 (Data Sub-blocks) で格納します。

副塊情報形式 (Data Sub-blocks)

バイト位置（副塊情報形式）	内容
$0$	後続のバイト数 $N$
$1$	データ列（$N$ バイト）
$N+2$	後続のバイト数
$N+3$	データ列（続き）
...	...
...	...
...	...
-	後続のバイト数
-	データ列（続き）
-	後続のバイト数 = 0

後続のバイト数は最大で 255 です。

「89a」版による拡張

「89a」版による拡張は、以下の形式となっています。

バイト位置（識別子）	内容
0	「89a」版拡張 (Extension Introducer)：0x21 (Descriptor)
1	表題 (Label)
2	副塊情報形式 (Data Sub-blocks)
-	〃

この形式により、未知の表題 (Label) を未知のデータとして処理可能になっています。

図形制御拡張 (Graphic Control Extension)

バイト位置（図形制御拡張）	内容
0	「89a」版拡張 (Extension Introducer)：0x21 (Descriptor)
1	図形制御表題 (Graphic Control Label)：0xF9
2	情報の大きさ：0x04 (副塊の後続バイト数)
3	詰合情報 <Packed Fields>
4	遅延時間(1/100秒単位)の下位8ビット (Delay Time)
5	遅延時間(1/100秒単位)の上位8ビット (Delay Time)
6	透明色とする色番号 (Transparet Color Index)
7	終端：0x00 (副塊の後続バイト数)

詰合情報 <Packed Fields>

ビット位置	ビット数	内容
0	3	予約 (Reserved)
3	3	消去方法 (Disposal Method)
6	1	ユーザー操作による遅延時間の短縮 (User Input Flag)
7	1	透明色が有効 (Transparent Color Flag)

消去方法 (Disposal Method)

値	内容
0	未定義（デコーダは何もしない）
1	消去しない
2	背景色 (論理画面記述子で指定) を使う
3	一つ前の画像に戻す
4-7	（予約）

注釈拡張 (Comment Extension)

バイト位置（注釈拡張）	内容
0	「89a」版拡張 (Extension Introducer)：0x21 (Descriptor)
1	注釈表題 (Comment Label)：0xFE
2	注釈情報 (副塊情報形式：Data Sub-blocks)
-	〃

文字画面拡張 (Plain Text Extension)

バイト位置（文字画面拡張）	内容
0	「89a」版拡張 (Extension Introducer)：0x21 (Descriptor)
1	文字画面表題 (Plain Text Label)：0x01
2	文字画面設定のサイズ (副塊情報形式：Data Sub-blocks)：0x0C
3	文字画面の位置（左）の下位8ビット (Text Grid Left Position)
4	文字画面の位置（左）の上位8ビット (Text Grid Left Position)
5	文字画面の位置（上）の下位8ビット (Text Grid Top Position)
6	文字画面の位置（上）の上位8ビット (Text Grid Top Position)
7	文字画面の幅の下位8ビット (Text Grid Width)
8	文字画面の幅の上位8ビット (Text Grid Width)
9	文字画面の高さの下位8ビット (Text Grid Height)
10	文字画面の高さの上位8ビット (Text Grid Height)
11	文字の幅 (Character Cell Width)
12	文字の高さ (Character Cell Height)
13	文字の共通色番号 (Text Foreground Color Index)
14	文字背景の共通色番号 (Text Background Color Index)
15	任意の文字列 (副塊情報形式：Data Sub-blocks) (Plain Text Data)
-	〃

応用拡張 (Application Extension)

バイト位置（応用拡張）	内容
0	「89a」版拡張 (Extension Introducer)：0x21 (Descriptor)
1	応用拡張表題 (Application Extension Label)：0xFF
2	識別子と認識コードのサイズ (副塊情報形式: Data Sub-blocks)：0x0B
3	8バイトの識別子 (Application Identifier)
11	3バイトの認識コード (Application Authentication Code)
14	任意の応用拡張情報 (副塊情報形式：Data Sub-blocks) (Application Data)
-	〃

終端子 (Trailer)

バイト位置（オフセット）	内容
0	終端子 (Trailer)：0x3B

GIF における LZW のパラメータ

LZW 最小コード幅 (LZW Minimum Code Size) を LMCS とします。

内容	値
各コードのビット幅（可変長データ）	3 〜 12
LMCS の最小値	2
初期化コード <Clear Code>	$2^{LMCS}$
最初のコード	$2^{LMCS} + 1$
コードの最大値	$2^{12} - 1$

LZW の圧縮と展開

クリアコードを省いているので完全ではありませんが、圧縮と展開のイメージが掴めればと思います。

圧縮と展開の動作を示すサンプルプログラム

lzw_sample.js

// サンプル: (〒899-7103 鹿児島県)志布志市志布志町志布志 //
const SAMPLE_TEXT = 'SHIBUSHISHI SHIBUSHICHO SHIBUSHI';

// コードと文字の変換.
const CODE_TO_TEXT = ' BCHIOSU';
const codeToChar = ((c) => CODE_TO_TEXT[c]);

// 文字列の並びを反転.
const stringReverse = ((s) => s.split('').reverse().join(''));

/*
 * LZW 圧縮
 */


function encodeLZW(data, minimum_bits=3) {
    let encode_data = '';  // 圧縮データ列(10進).
    let encode_binary = '';  // 圧縮データ列(2進).

    // 空データ対策.
    if (data.length == 0)
        return [encode_data, encode_binary];

    const code_end = (1 << minimum_bits);      // 終端コード.
    const code_clear = code_end + 1;           // 辞書クリアコード.
    let code_dict;  // 文字列の辞書.
    let code_curr;  // 辞書に追加する文字列のコード.

    // 辞書の初期化処理.
    //     code_dict = {
    //         ' ': 0, 'B': 1, 'C': 2, 'H': 3,
    //         'I': 4, 'O': 5, 'S': 6, 'U': 7,
    //     }
    const initDict = function() {
        code_dict = new Map();
        for (let i = 0; i < CODE_TO_TEXT.length; i++)
            code_dict.set(codeToChar(i), i);
        code_curr = code_clear;
    };

    // 圧縮コードのビット列を生成.
    const make_binary = function(code) {
        bits = 32 - Math.clz32(code_curr);  // 出力するデータのビット数を求める.
        binary = '';
        for (let i = 0; i < bits; i++)
            binary = String((code >> i) & 1) + binary;
        return binary;
    }

    initDict();  // 辞書の初期化.

    console.log('圧縮: \'' + data + '\'');
    console.log('最小ビット = ' + minimum_bits);
    console.log('終端コード = ' + code_end);
    console.log('クリアコード = ' + code_clear);
    console.log('圧縮コードの先頭 = ' + (code_clear + 1));

    let diter = data[Symbol.iterator]();  // 参照するデータのイテレータ.
    let str = '';   // 検索文字列.
    let bin_curr;   // 最初の圧縮コード
    for (;;) {
        let dinf = diter.next();  // 配列から文字を取り出す.
        if (dinf.done) break;     // データがなければ終了.

        let ch = dinf.value;      // 文字データ.
        str += ch;                // 検索文字列の更新.
        let bin_try = code_dict.get(str);
        if (bin_try != undefined) {
            console.log('文字[\'' + ch + '\'] : 辞書あり: \'' + str + '\'');
            bin_curr = bin_try;   // 検索結果を更新.
            continue;  // 既に辞書にあれば検索文字列を長くする(次のデータへ).
        }
        console.log('文字[\'' + ch + '\'] : 辞書なし: \'' + str + '\'');

        // 圧縮コードは前回の検索結果を出力する.
        let binary = make_binary(bin_curr);
        encode_data += ' ' + bin_curr;
        encode_binary += ' ' + binary;

        // 辞書に文字列を登録する.
        code_dict.set(str, ++code_curr);

        console.log('  圧縮コード(前回分): \'' + str.slice(0, -1) + '\':' + bin_curr + '=' + binary);
        console.log('  新規辞書登録文字列: \'' + str + '\':' + code_curr);

        /* 本当は code_curr が最大コードに達したら、辞書クリアコードの発行と辞書の初期化が必要 */

        // 文字列の最終文字は圧縮保留状態なので、その文字から再開する.
        str = ch;
        bin_curr = code_dict.get(str);
    }

    {// 最後の圧縮コードを出力する.
        let binary = make_binary(bin_curr);
        encode_data += ' ' + bin_curr;
        encode_binary += ' ' + binary;

        console.log('  最後の圧縮コード  : \'' + str + '\':' + bin_curr + '=' + binary);
    }
    {// 終端コードを出力する.
        let binary = make_binary(code_end);
        encode_data += ' ' + code_end;
        encode_binary += ' ' + binary;

        console.log('  終端コード        : ' + code_end + '=' + binary);
    }

    return [encode_data, encode_binary];
}

// 圧縮データを得る.
const encode_data = function() {
    const [encode_list, encode_binary] = encodeLZW(SAMPLE_TEXT);
    const binaries = encode_binary.slice(1).split(' ');
    const encbin = binaries.reduce(function(p, v) { return p + stringReverse(v); }, '');

    let encstr = encbin;
    let encdat = [];
    while (encstr.length > 8) {
        encdat.push(stringReverse(encstr.slice(0, 8)));
        encstr = encstr.slice(8);
    }
    if (encstr.length > 0)
        encdat.push(stringReverse((encstr + '00000000').slice(0, 8)));
    const data = encdat.map((d) => Number('0b' + d));

    console.log('圧縮コード(10進):' + encode_list);
    console.log('圧縮コード( 2進):' + encode_binary);
    console.log(binaries);
    // console.log(encbin);
    console.log('リトル・エンディアンで詰めた圧縮データ（バイト列）');
    console.log(encdat);
    console.log(data);

    return data;
}();


/*
 * LZW 解凍
 */

function decodeLZW(data, minimum_bits=3) {
    const code_end = (1 << minimum_bits);      // 終端コード.
    const code_clear = code_end + 1;           // 辞書クリアコード.
    let code_dict;  // 文字列の辞書.
    let code_curr;  // 辞書に追加する文字列のコード.

    // 辞書の初期化処理.
    const initDict = function() {
        code_dict = [...Array(code_end)].map((_, i) => codeToChar(i));
        code_dict.push(undefined, undefined);
        code_curr = code_clear + 1;
    };

    // データからビット列を取り出す関数.
    let data_bit_pos = 0;
    const read = function() {
        bits = 32 - Math.clz32(code_curr);  // 入力するデータのビット数を求める.
        let bps = (data_bit_pos >> 3);
        let bpe = ((data_bit_pos + bits - 1) >> 3);
        let v = data[bps];
        if (bps != bpe) {
            v |= data[++bps] << 8;
            if (bps != bpe)
                v |= data[++bps] << 16;
        }
        let s = (data_bit_pos & 7);
        let m = ((1 << bits) - 1);
        data_bit_pos += bits;
        return ((v >> s) & m);
    };

    initDict();  // 辞書の初期化.

    console.log('解凍: 入力は ' + data.length + ' バイト');
    console.log('最小ビット = ' + minimum_bits);
    console.log('終端コード = ' + code_end);
    console.log('クリアコード = ' + code_clear);
    console.log('圧縮コードの先頭 = ' + (code_clear + 1));

    let decode_data = '';
    let code_last = undefined;
    let char_last = undefined;
    for (;;) {
        const code = read();  // コード・データの取得.

        // 終端コードならば終了.
        if (code == code_end) {
            console.log('コード(終端): ' + code);
            break;
        }

        // クリアコードならば辞書の初期化.
        // if (code == code_clear) {
        //     console.log('クリアコード: ' + code);
        //     initDict();
        //     code_last = undefined;
        //     char_last = undefined;
        //     continue;
        // }

        if (code_last == undefined) {
            // 辞書を初期化した直後のコード処理.
            code_last = code;
            char_last = codeToChar(code);
            decode_data += char_last;    // 1文字出力する
            console.log('コード(先頭): \'' + char_last + '\':' + code);
            continue;
        }

        let data_last = code_dict[code_last];
        let code_data;
        if (code < code_curr) {
            // コードは辞書内にあるので、データを辞書から取り出す.
            code_data = code_dict[code];
            console.log('コード(辞書): \'' + code_data + '\':' + code);
        } else if (code == code_curr) {
            // 圧縮時に辞書に追加されたパターンに追随する.
            code_data = data_last + char_last;
            console.log('コード(追随): \'' + code_data + '\':' + code);
        } else {
            console.log('コード(失敗): ' + code + ' > ' + code_curr);
            throw 'デコード失敗：データの異常を検出しました';
        }
        decode_data += code_data;   // データを出力する.

        // 辞書を更新
        char_last = code_data[0];
        code_dict.push(data_last + char_last);
        console.log('    辞書追加: \'' + data_last + char_last + '\':' + code_curr);
        code_curr++;

        // 次へ
        code_last = code;
    }
    return decode_data;
}

// 圧縮データの解凍をする.
console.log('解凍結果: \'' + decodeLZW(encode_data) + '\'');

実行結果

$ node
Welcome to Node.js v16.13.1.
Type ".help" for more information.
>
$ node --trace-uncaught lzw_sample.js
圧縮: 'SHIBUSHISHI SHIBUSHICHO SHIBUSHI'
最小ビット = 3
終端コード = 8
クリアコード = 9
圧縮コードの先頭 = 10
文字['S'] : 辞書あり: 'S'
文字['H'] : 辞書なし: 'SH'
  圧縮コード(前回分): 'S':6=0110
  新規辞書登録文字列: 'SH':10
文字['I'] : 辞書なし: 'HI'
  圧縮コード(前回分): 'H':3=0011
  新規辞書登録文字列: 'HI':11
文字['B'] : 辞書なし: 'IB'
  圧縮コード(前回分): 'I':4=0100
  新規辞書登録文字列: 'IB':12
文字['U'] : 辞書なし: 'BU'
  圧縮コード(前回分): 'B':1=0001
  新規辞書登録文字列: 'BU':13
文字['S'] : 辞書なし: 'US'
  圧縮コード(前回分): 'U':7=0111
  新規辞書登録文字列: 'US':14
文字['H'] : 辞書あり: 'SH'
文字['I'] : 辞書なし: 'SHI'
  圧縮コード(前回分): 'SH':10=1010
  新規辞書登録文字列: 'SHI':15
文字['S'] : 辞書なし: 'IS'
  圧縮コード(前回分): 'I':4=0100
  新規辞書登録文字列: 'IS':16
文字['H'] : 辞書あり: 'SH'
文字['I'] : 辞書あり: 'SHI'
文字[' '] : 辞書なし: 'SHI '
  圧縮コード(前回分): 'SHI':15=01111
  新規辞書登録文字列: 'SHI ':17
文字['S'] : 辞書なし: ' S'
  圧縮コード(前回分): ' ':0=00000
  新規辞書登録文字列: ' S':18
文字['H'] : 辞書あり: 'SH'
文字['I'] : 辞書あり: 'SHI'
文字['B'] : 辞書なし: 'SHIB'
  圧縮コード(前回分): 'SHI':15=01111
  新規辞書登録文字列: 'SHIB':19
文字['U'] : 辞書あり: 'BU'
文字['S'] : 辞書なし: 'BUS'
  圧縮コード(前回分): 'BU':13=01101
  新規辞書登録文字列: 'BUS':20
文字['H'] : 辞書あり: 'SH'
文字['I'] : 辞書あり: 'SHI'
文字['C'] : 辞書なし: 'SHIC'
  圧縮コード(前回分): 'SHI':15=01111
  新規辞書登録文字列: 'SHIC':21
文字['H'] : 辞書なし: 'CH'
  圧縮コード(前回分): 'C':2=00010
  新規辞書登録文字列: 'CH':22
文字['O'] : 辞書なし: 'HO'
  圧縮コード(前回分): 'H':3=00011
  新規辞書登録文字列: 'HO':23
文字[' '] : 辞書なし: 'O '
  圧縮コード(前回分): 'O':5=00101
  新規辞書登録文字列: 'O ':24
文字['S'] : 辞書あり: ' S'
文字['H'] : 辞書なし: ' SH'
  圧縮コード(前回分): ' S':18=10010
  新規辞書登録文字列: ' SH':25
文字['I'] : 辞書あり: 'HI'
文字['B'] : 辞書なし: 'HIB'
  圧縮コード(前回分): 'HI':11=01011
  新規辞書登録文字列: 'HIB':26
文字['U'] : 辞書あり: 'BU'
文字['S'] : 辞書あり: 'BUS'
文字['H'] : 辞書なし: 'BUSH'
  圧縮コード(前回分): 'BUS':20=10100
  新規辞書登録文字列: 'BUSH':27
文字['I'] : 辞書あり: 'HI'
  最後の圧縮コード  : 'HI':11=01011
  終端コード        : 8=01000
圧縮コード(10進): 6 3 4 1 7 10 4 15 0 15 13 15 2 3 5 18 11 20 11 8
圧縮コード( 2進): 0110 0011 0100 0001 0111 1010 0100 01111 00000 01111 01101 01111 00010 00011 00101 10010 01011 10100 01011 01000
[
  '0110',  '0011',  '0100',
  '0001',  '0111',  '1010',
  '0100',  '01111', '00000',
  '01111', '01101', '01111',
  '00010', '00011', '00101',
  '10010', '01011', '10100',
  '01011', '01000'
]
リトル・エンディアンで詰めた圧縮データ（バイト列）
[
  '00110110', '00010100',
  '10100111', '11110100',
  '11000000', '01101011',
  '01001111', '10001100',
  '00100010', '00010111',
  '01011101', '00001000'
]
[
   54, 20, 167, 244, 192,
  107, 79, 140,  34,  23,
   93,  8
]
解凍: 入力は 12 バイト
最小ビット = 3
終端コード = 8
クリアコード = 9
圧縮コードの先頭 = 10
コード(先頭): 'S':6
コード(辞書): 'H':3
    辞書追加: 'SH':10
コード(辞書): 'I':4
    辞書追加: 'HI':11
コード(辞書): 'B':1
    辞書追加: 'IB':12
コード(辞書): 'U':7
    辞書追加: 'BU':13
コード(辞書): 'SH':10
    辞書追加: 'US':14
コード(辞書): 'I':4
    辞書追加: 'SHI':15
コード(辞書): 'SHI':15
    辞書追加: 'IS':16
コード(辞書): ' ':0
    辞書追加: 'SHI ':17
コード(辞書): 'SHI':15
    辞書追加: ' S':18
コード(辞書): 'BU':13
    辞書追加: 'SHIB':19
コード(辞書): 'SHI':15
    辞書追加: 'BUS':20
コード(辞書): 'C':2
    辞書追加: 'SHIC':21
コード(辞書): 'H':3
    辞書追加: 'CH':22
コード(辞書): 'O':5
    辞書追加: 'HO':23
コード(辞書): ' S':18
    辞書追加: 'O ':24
コード(辞書): 'HI':11
    辞書追加: ' SH':25
コード(辞書): 'BUS':20
    辞書追加: 'HIB':26
コード(辞書): 'HI':11
    辞書追加: 'BUSH':27
コード(終端): 8
解凍結果: 'SHIBUSHISHI SHIBUSHICHO SHIBUSHI'

サンプルプログラム

HTML+JavaScriptでローカル生成[少々長いので折りたたみ]

gif_test.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
    <title>GIF プログラムのテスト</title>
    <style>
      body {
          margin-left: auto;
          margin-right: auto;
          width: 750px;
      }
      table {
          border: solid 1px gray;
          border-collaspe: collaspe;
          border-spacing: 0;
      }
      th, td {
          border: solid 1px gray;
          padding: 4px;
      }
    </style>
  </head>
  <body>
    <h2>GIF プログラムのテスト</h2>
    <table>
      <tr>
        <td style="text-align: center;">
          Sample 1<br/>
          <span id="sample1"></span>
        </td>
      </tr>
      <tr>
        <td style="text-align: center;">
          Sample 2<br/>
          <span id="sample2"></span><br/>
          乱数を使用しているのでページを開く度に異なる
        </td>
      </tr>
      <tr>
        <td style="text-align: center;">
          Sample 3<br/>
          <span id="sample3"></span><br/>
          乱数を使用しているのでページを開く度に異なる
        </td>
      </tr>
      <tr>
        <td style="text-align: center;">
          Sample 4<br/>
          <span id="sample4"></span><br/>
          乱数を使用しているのでページを開く度に異なる
        </td>
      </tr>
      <tr>
        <td style="text-align: center;">
          Sample 5<br/>
          <span id="sample5"></span><br/>
          乱数を使用しているのでページを開く度に異なる
        </td>
      </tr>
<!--
-->
      <tr>
        <td style="text-align: center;">
          Sample A1<br/>
          <span id="sampleA1"></span><br/>
          乱数を使用しているのでページを開く度に異なる
        </td>
      </tr>
    </table>
    <script type="text/javascript">
    <!--

      /* ********************************** */

      /*
       * GIF 形式データを生成するクラス
       */

      class MyGIF {
          static signature = [0x47, 0x49, 0x46];
          static version87a = [0x38, 0x37, 0x61];
          static version89a = [0x38, 0x39, 0x61];

          // コンストラクタ.
          constructor(width, height, resolution, background, global_color, aspect) {
              const S = MyGIF;
              this.S = S;
              this.signature = S.signature;
              this.version = S.version89a;
              this.logicalScreen = S.createLogicalScreenDescriptor(
                  width, height, resolution, background, global_color, aspect);
              this.descriptor = [];
          };

          // GIF形式のバイナリを取得する.
          get_binary() {
              return [
                  this.signature,
                  this.version,
                  this.logicalScreen.get_binary(),
                  this.descriptor.map((d, _) => d.get_binary()).flat(),
              ].flat();
          };

          // 任意の Descriptor を追加する.
          appendDescriptor(descriptor) {
              this.descriptor.push(descriptor);
          };

          // Image Descriptor を追加する.
          appendImageDescriptor(x, y, w, h, data, color, interlace) {
              this.descriptor.push(this.S.createImageDescriptor(x, y, w, h, data, color, interlace));
          };

          // Graphic Control Extension を追加する.
          appendGraphicControlExtension(delay, method, transparent, input) {
              this.descriptor.push(this.S.createGraphicControlExtension(delay, method, transparent, input));
          };

          // Comment Extension を追加する.
          appendCommentExtension(text) {
              this.descriptor.push(this.S.createCommentExtension(text));
          };

          // Plain Text Extension を追加する.
          appendPlainTextExtension(x, y, w, h, cw, ch, fc, bc, text) {
              this.descriptor.push(this.S.createPlainTextExtension(x, y, w, h, cw, ch, fc, bc, text));
          };

          // Application Extension を追加する.
          appendApplicationExtension(id, code, data) {
              this.descriptor.push(this.S.createApplicationExtension(id, code, data));
          };

          // アニメーションのループ回数を設定する.
          appendApplicationExtensionForLoop(count) {
              this.appendApplicationExtension('NETSCAPE', '2.0', [1, (count & 0xff), ((count >> 8) & 0xff)]);
          };

          // Trailer を追加する.
          appendTrailer() {
              this.descriptor.push(this.S.createTrailer());
          };

          // 8 ビット形式の取得.
          static uint8el(x) {
              return ((!x ? 0 : x) & 0xff);
          };

          // 16 ビット・リトル・エンディアン形式の取得.
          static uint16el(x) {
              const y = (!x ? 0 : x);
              return [(y & 0xff), ((y >> 8) & 0xff)];
          };

          // 色情報の過不足を調整.
          static fixColorTable(depth, color) {
              const colen = (1 << (depth + 1)) * 3;
              let table = color.flat();
              return ((table.length > colen) ? table.slice(0, colen) :
                      table.concat(Array(colen - table.length).fill(0)));
          };

          // 文字の UTF-8 バイナリ化.
          static charToUTF8(c) {
              if (c < 0x0080) return c;
              if (c < 0x0800) return [
                  (0xc0 | (c >> 6)),
                  (0x80 | (c & 0x3f)),
              ];
              return [
                  (0xe0 | (c >> 12)),
                  (0x80 | ((c >> 6) & 0x3f)),
                  (0x80 | (c & 0x3f)),
              ];
          };
          static stringToUTF8(s) {
              return [...Array(s.length)].map((_, i) => MyGIF.charToUTF8(s.charCodeAt(i))).flat();
          };

          // Data Sub-blocks の生成.
          static createDataSubBlocks(data) {
              let block = [];
              let pos = 0;
              let length = data.length;
              while (length) {
                  let slen = (length < 256) ? length : 255;
                  block.push(slen);
                  block.push(data.slice(pos, pos + slen));
                  pos += slen;
                  length -= slen;
              };
              block.push(0);
              return block.flat();
          };

          // Logical Screen Descriptor の生成.
          static createLogicalScreenDescriptor(width, height, resolution, background, color, sort, aspect) {
              const S = MyGIF;
              const D = {
                  logical_screen_width: width,
                  logical_screen_height: height,

                  size_of_global_color_table: 0,
                  sort_flag: sort,
                  color_resolution: resolution,
                  global_color_table_flag: false,

                  background_color_index: background,
                  pixel_aspect_ratio: ((aspect == undefined) ? 49 : aspect),

                  global_color_table: undefined,

                  set_color: (function(table) {
                      const flag = (table != undefined);
                      D.size_of_global_color_table =
                          (!flag ? 0 : (31 - Math.clz32(table.length-1)));
                      D.global_color_table_flag = flag;
                      D.global_color_table = table;
                  }),

                  get_binary: (function() {
                      const sgct = (!D.size_of_global_color_table ? 0 : (7 & D.size_of_global_color_table));
                      const sort = (!D.sort_flag ? 0 : 1);
                      const res = (!D.color_resolution ? 0 : (7 & D.color_resolution));
                      const gcf = (!D.global_color_table_flag ? 0 : 1);
                      const bgc = (!D.background_color_index ? 0 : D.background_color_index);
                      const aspect = ((D.pixel_aspect_ratio == undefined) ? 49 : D.pixel_aspect_ratio);
                      const color = (!gcf ? [] : S.fixColorTable(sgct, D.global_color_table));
                      return [
                          S.uint16el(D.logical_screen_width),
                          S.uint16el(D.logical_screen_height),
                          (sgct | (sort << 3) | (res << 4) | (gcf << 7)),
                          S.uint8el(bgc),
                          S.uint8el(aspect),
                          color.map((v, _) => S.uint8el(v)),
                      ].flat();
                  }),
              };
              D.set_color(color);
              return D;
          };

          // Image Descriptor の生成.
          static createImageDescriptor(x, y, w, h, data, color, interlace, sort) {
              const S = MyGIF;
              const D = {
                  descriptor: 0x2c,

                  image_left_position: x,
                  image_top_position: y,
                  image_width: w,
                  image_height: h,

                  size_of_local_color_table: 0,
                  sort_flag: sort,
                  interlace_flag: interlace,
                  local_color_table_flag: false,

                  local_color_table: undefined,
                  table_based_image_data: S.createTableBasedImageData(data),

                  set_color_table: (function(table) {
                      const flag = (table != undefined);
                      D.size_of_local_color_table =
                          (!flag ? 0 : (31 - Math.clz32(table.length-1)));
                      D.local_color_table_flag = flag;
                      D.local_color_table = table;
                  }),

                  get_binary: (function() {
                      const slct = (!D.size_of_local_color_table ? 0 : (7 & D.size_of_local_color_table));
                      const sort = (!D.sort_flag ? 0 : 1);
                      const interlace = (!D.interlace ? 0 : 1);
                      const lcf = (!D.local_color_table_flag ? 0 : 1);
                      const color = (!lcf ? [] : S.fixColorTable(slct, D.local_color_table));
                      return [
                          D.descriptor,
                          S.uint16el(D.image_left_position),
                          S.uint16el(D.image_top_position),
                          S.uint16el(D.image_width),
                          S.uint16el(D.image_height),
                          (slct | (sort << 5) | (interlace << 6) | (lcf << 7)),
                          color.map((v, _) => S.uint8el(v)),
                          D.table_based_image_data.lzw_minimum_code_size,
                          D.table_based_image_data.data,
                      ].flat();
                  }),
              };
              D.set_color_table(color);
              return D;
          };

          // Table Based Image の生成 (LZW圧縮)
          static createTableBasedImageData(source) {
              const S = MyGIF;
              const source_size = source.length;
              // const src_max = Math.max.apply(null, source);  // 'Maximum call stack size exceeded' がでる.
              const src_max = function() { let m = 0; for (const d of source) if (m < d) m = d; return m; }();
              const src_max_clz = (32 - Math.clz32(src_max));

              const bits_init = ((src_max_clz < 2) ? 2 : src_max_clz);
              let bits_curr = (bits_init + 1);

              const code_base = (1 << bits_init);
              const code_clear = code_base;
              const code_end = code_base + 1;
              const code_max = ((1 << 12) - 1);

              let code_curr = code_end;
              let code_step = (1 << bits_curr);

              const tree = [...Array(code_max + 2)].map((_, i) => ({ code: i, next: -1, down: -1, data: 0 }));

              const buffer = [];
              let bs_pos = 0;

              const write = function(data) {
                  const bits = bits_curr;
                  let idxs = (bs_pos >> 3);
                  const idxe = ((bs_pos + bits - 1) >> 3);
                  data <<= (bs_pos & 7);
                  if (idxs < buffer.length) {
                      buffer[idxs] |= (data & 0xff);
                      data >>= 8;
                      idxs++;
                  };
                  while (idxs <= idxe) {
                      buffer.push(data & 0xff);
                      data >>= 8;
                      idxs++;
                  };
                  bs_pos += bits;
              };

              write(code_clear);
              if (!source_size) {
                  write(code_end);
                  return {
                      lzw_minimum_code_size: bits_init,
                      data: S.createDataSubBlocks(buffer),
                  };
              };

              let siter = source.values();
              let sdat = siter.next();
              lzw: for (;;) {
                  let data, next;
                  let node = tree[(data = sdat.value)];
                  scan: for (;;) {
                      if ((sdat = siter.next()).done) {
                          write(node.code);
                          break lzw;
                      };
                      data = sdat.value;
                      if ((next = tree[node.down]) == undefined)
                          break;
                      while (data != next.data)
                          if ((next = tree[next.next]) == undefined)
                              break scan;
                      node = next;
                  };

                  write(node.code);
                  {
                      const next = tree[++code_curr];
                      // next.code = code_curr;
                      next.next = node.down;
                      next.down = -1;
                      next.data = data;
                      node.down = code_curr;
                  }
                  if (code_curr < code_step)
                      continue;
                  if (code_curr < code_max) {
                      bits_curr++;
                      if ((code_step <<= 1) < code_max)
                          continue;
                      code_step = code_max;
                      continue;
                  };
                  write(code_clear);

                  bits_curr = bits_init + 1;
                  code_step = (1 << bits_curr);
                  code_curr = code_end;
                  for (let i = 0; i < code_base; i++) {
                      const node = tree[i];
                      // node.code = i;
                      node.next = -1;
                      node.down = -1;
                      // node.data = 0;
                  };
              };
              write(code_end);

              return {
                  lzw_minimum_code_size: bits_init,
                  data: S.createDataSubBlocks(buffer),
              };
          };

          // Graphic Control Extension の生成.
          static createGraphicControlExtension(delay, method, transparent, input) {
              const S = MyGIF;
              const D = {
                  descriptor: 0x21,
                  label: 0xf9,

                  disposal_method: method,
                  user_input_flag: input,
                  transparent_color_flag: false,

                  delay_time: delay,
                  transparent_color_index: 0,

                  set_transparent: (function(index) {
                      D.transparent_color_flag = (index != undefined);
                      D.transparent_color_index = (!index ? 0 : index);
                  }),

                  get_binary: (function() {
                      const method = (!D.disposal_method ? 0 : (7 & D.disposal_method));
                      const input = (!D.user_input_flag ? 0 : 1);
                      const ftrans = (!D.transparent_color_flag ? 0 : 1);
                      return [
                          D.descriptor,
                          D.label,
                          4, /* Data Sub-blocks */
                          ((method << 3) | (input << 6) | (ftrans << 7)),
                          S.uint16el(D.delay_time),
                          S.uint8el(D.transparent_color_index),
                          0, /* Data Sub-blocks */
                      ].flat();
                  }),
              };
              D.set_transparent(transparent);
              return D;
          };

          // Comment Extension の生成.
          static createCommentExtension(text) {
              const S = MyGIF;
              const D = {
                  descriptor: 0x21,
                  label: 0xfe,

                  text: text,

                  get_binary: (() => [
                      D.descriptor,
                      D.label,
                      S.createDataSubBlocks(S.stringToUTF8(D.tex)),
                  ].flat()),
              };
              return D;
          };

          // Plain Text Extension の生成.
          static createPlainTextExtension(x, y, w, h, cw, ch, fc, bc, text) {
              const S = MyGIF;
              const D = {
                  descriptor: 0x21,
                  label: 0x01,

                  text_grid_left_position: x,
                  text_grid_top_position: y,
                  text_grid_width: w,
                  text_grid_height: h,
                  character_cell_width: cw,
                  character_cell_height: ch,
                  text_foreground_color_index: fc,
                  text_background_color_index: bc,
                  plain_text_data: text,

                  get_binary: (() => [
                      D.descriptor,
                      D.label,
                      12, /* Data Sub-blocks */
                      S.uint16el(D.text_grid_left_position),
                      S.uint16el(D.text_grid_top_position),
                      S.uint16el(D.text_grid_width),
                      S.uint16el(D.text_grid_height),
                      S.uint8el(D.character_cell_width),
                      S.uint8el(D.character_cell_height),
                      S.uint8el(D.text_foreground_color_index),
                      S.uint8el(D.text_background_color_index),
                      S.createDataSubBlocks(S.stringToUTF8(D.plain_text_data)),
                  ].flat()),
              };
              return D;
          };

          // Application Extension の生成.
          static createApplicationExtension(id, code, data) {
              const S = MyGIF;
              const D = {
                  descriptor: 0x21,
                  label: 0xff,

                  application_identifier: id,
                  application_authentication_code: code,
                  application_data: data,

                  get_binary: (() => [
                      D.descriptor,
                      D.label,
                      11, /* Data Sub-blocks */
                      S.stringToUTF8(D.application_identifier + '        ').slice(0, 8),
                      S.stringToUTF8(D.application_authentication_code + '   ').slice(0, 3),
                      S.createDataSubBlocks(D.application_data.map((v, _) => S.uint8el(v))),
                  ].flat()),
              };
              return D;
          };

          // Trailer の生成.
          static createTrailer() {
              return {
                  descriptor: 0x3b,
                  get_binary: (() => 0x3b),
              };
          };
      };

      /* **************************************** */
      /*
       * Base 64 符号化
       */

      class MyBase64 {
          static EncodeTable = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';

          static encode(b) {
              const table = MyBase64.EncodeTable;
              const blen = b.length;
              const brem = blen % 3;
              const bcnt = blen - brem;
              let s = '';
              let i = 0;
              while (i < bcnt) {
                  const d0 = b[i++];
                  const d1 = b[i++];
                  const d2 = b[i++];
                  const d = (d0 << 16) | (d1 << 8) | d2;
                  s += table[(d >> 18) & 0x3f];
                  s += table[(d >> 12) & 0x3f];
                  s += table[(d >>  6) & 0x3f];
                  s += table[d & 0x3f];
              };
              if (brem) {
                  const b2 = (brem == 2);
                  const d0 = b[i++];
                  const d1 = (b2 ? b[i++] : 0);
                  const d = (d0 << 16) | (d1 << 8);
                  s += table[(d >> 18) & 0x3f];
                  s += table[(d >> 12) & 0x3f];
                  s += (b2 ? table[(d >> 6) & 0x3f] : '=');
                  s += '=';
              };
              return s;
          };
      };

      /* ********************************** */

      /*
       * GIF 画像生成用
       */

      class MyPixelBuffer {
          static grayScaleColor = function(count) {
              const m = 255;
              const n = count - 1;
              return [...Array(count)].map(function(_, k) {
                  const l = Math.trunc((k * m) / n);
                  return [l, l, l];
              });
          };
          static grayScaleColor4 = MyPixelBuffer.grayScaleColor(4);
          static grayScaleColor256 = MyPixelBuffer.grayScaleColor(256);

          static simpleColorBase = [...Array(8)].map((_, i) => Math.trunc(i * 255 / 7));
          static simpleColor = [...Array(256)].map((_, i) => [
              MyPixelBuffer.simpleColorBase[(i >> 5) & 7],
              MyPixelBuffer.simpleColorBase[(i >> 2) & 7],
              [0, 85, 170, 255][i & 3],
          ]);

          static interlaceMap = new Map();
          static createInterlaceTable(h) {
              const m = MyPixelBuffer.interlaceMap;
              if (m.has(h))
                  return m.get(h);
              const ph = [
                  [0, 8, ((h + 7) >> 3)],
                  [4, 8, ((h + 3) >> 3)],
                  [2, 4, ((h + 1) >> 2)],
                  [1, 2, (h >> 1)],
              ];
              const tab = [...Array(4)].map(
                  (_, i) => [...Array(ph[i][2])].map(
                      (_, j) => ph[i][0] + ph[i][1] * j)).flat();
              m.set(h, tab);
              return tab;
          };

          // コンストラクタ.
          constructor(color, width, height, defcol=0) {
              this.S = MyPixelBuffer;
              this.GIF = MyGIF;
              this.color = color;
              this.width = width;
              this.height = height;
              this.pixel = Array(width * height).fill(defcol);
          };

          // 点を打つ.
          setPoint(x, y, c) {
              const w = this.width;
              if ((0 <= x) && (x < w) &&
                  (0 <= y) && (y < this.height)) {
                  const p = y * w + x;
                  if ((p < 0) || (this.pixel.length <= p)) {
                      console.log(p);
                  };
                  this.pixel[p] = c;
              }
          };

          // 線を引く.
          setLine(x1, y1, x2, y2, c, sep) {
              const dx = Math.trunc(Math.abs(x1 - x2));
              const dy = Math.trunc(Math.abs(y1 - y2));
              if (!dx)
                  this.setVirticalLine(x1, y1, y2, c);
              else if (!dy)
                  this.setHorizontalLine(x1, x2, y1, c);
              else if (dx >= dy)
                  this.setLineH(x1, y1, x2, y2, dx, dy, c, sep);
              else
                  this.setLineV(x1, y1, x2, y2, dx, dy, c, sep);
          };
          setLineH(x1, y1, x2, y2, dx, dy, c, sep) {
              const S = this.S;
              const w = this.width;
              const h = this.height;
              let xs, ys, xe, ye;

              if (x1 < x2) {
                  xs = x1; ys = y1;
                  xe = x2; ye = y2;
              } else {
                  xs = x2; ys = y2;
                  xe = x1; ye = y1;
              };
              if ((xe < 0) || (w <= xs))
                  return;

              const ay = ((ys < ye) ? +1 : -1);
              const ap = (ay < 0) ? -w: +w;

              let k = (dy >> 1);
              dx++;
              if (sep) {
                  dy++;
                  k = 0;
              };
              if (xs < 0) {
                  const kt = k - (dy * xs);
                  const yh = Math.trunc(kt / dx);
                  xs = 0;
                  ys += ((ay < 0) ? -yh : +yh);
                  k = (kt % dx);
              };
              if (w <= xe)
                  xe = w - 1;

              const yt = Math.min(ys, ye);
              const yb = Math.max(ys, ye);
              if ((yb < 0) || (h <= yt))
                  return;
              if (ay < 0) {
                  if (ye < 0)
                      ye = 0;
                  if (h <= ys) {
                      const yh = ys - h + 1;
                      const kt = k + (dx * yh);
                      const xw = Math.trunc(kt / dy);
                      xs += xw;
                      ys = h - 1;
                      k = kt % dy;
                  };
              } else {
                  if (h <= ye)
                      ye = h - 1;
                  if (ys < 0) {
                      const kt = k - (dx * ys);
                      const xw = Math.trunc(kt / dy);
                      xs += xw;
                      ys = 0;
                      k = kt % dy;
                  };
              };
              ye += ay;

              const pixel = this.pixel;
              let p = ys * w + xs;
              while (xs++ <= xe) {
                  pixel[p++] = c;
                  if ((k += dy) >= dx) {
                      k -= dx;
                      p += ap;
                      if ((ys += ay) == ye)
                          break;
                  };
              };
          };
          setLineV(x1, y1, x2, y2, dx, dy, c, sep) {
              const S = this.S;
              const w = this.width;
              const h = this.height;
              let xs, ys, xe, ye;

              if (y1 < y2) {
                  xs = x1; ys = y1;
                  xe = x2; ye = y2;
              } else {
                  xs = x2; ys = y2;
                  xe = x1; ye = y1;
              };
              if ((ye < 0) || (h <= ys))
                  return;

              const ax = ((xs < xe) ? +1 : -1);

              let k = (dy >> 1);
              dy++;
              if (sep) {
                  dx++;
                  k = 0;
              };
              if (ys < 0) {
                  const kt = k - (dx * ys);
                  const xw = Math.trunc(kt / dy);
                  xs += ((ax < 0) ? -xw : +xw);
                  ys = 0;
                  k = (kt % dy);
              };
              if (h <= ye)
                  ye = h - 1;

              const xl = Math.min(xs, xe);
              const xr = Math.max(xs, xe);
              if ((xr < 0) || (w <= xl))
                  return;
              if (ax < 0) {
                  if (xe < 0)
                      xe = 0;
                  if (w <= xs) {
                      const xw = xs - w + 1;
                      const kt = k + (dy * xw);
                      const yh = Math.trunc(kt / dx);
                      xs = w - 1;
                      ys += yh;
                      k = kt % dx;
                  };
              } else {
                  if (w <= xe)
                      xe = w - 1;
                  if (xs < 0) {
                      const kt = k - (dy * xs);
                      const yh = Math.trunc(kt / dx);
                      xs = 0;
                      ys += yh;
                      k = kt % dx;
                  };
              };
              xe += ax;

              const pixel = this.pixel;
              let p = ys * w + xs;
              while (ys++ <= ye) {
                  pixel[p] = c; p += w;
                  if ((k += dx) >= dy) {
                      k -= dy;
                      p += ax;
                      if ((xs += ax) == xe)
                          break;
                  };
              };
          };

          // 水平線を引く.
          setHorizontalLine(x1, x2, y, c) {
              const w = this.width;
              const h = this.height;
              const pixel = this.pixel;
              const xs = Math.trunc(Math.min(x1, x2));
              const xe = Math.trunc(Math.max(x1, x2));
              if ((xe < 0) || (w <= xs) || (y < 0) || (h <= y))
                  return;
              const us = Math.trunc(Math.max(xs, 0));
              const ue = Math.trunc(Math.min(xe, w-1));
              const yp = y * w;
              pixel.fill(c, yp + us, yp + ue + 1);
          }

          // 垂直線を引く.
          setVirticalLine(x, y1, y2, c) {
              const w = this.width;
              const h = this.height;
              const pixel = this.pixel;
              const ys = Math.trunc(Math.min(y1, y2));
              const ye = Math.trunc(Math.max(y1, y2));
              if ((x < 0) || (w <= x) || (ye < 0) || (h <= ys))
                  return;
              const vs = Math.trunc(Math.max(ys, 0));
              const ve = Math.trunc(Math.min(ye, h-1));
              const q = ve * w + x;
              for (let p = vs * w + x; p <= q; p += w)
                  pixel[p] = c;
          }

          // 四角形を描く.
          setBox(x1, y1, x2, y2, c) {
              const xs = Math.trunc(Math.min(x1, x2));
              const xe = Math.trunc(Math.max(x1, x2));
              const ys = Math.trunc(Math.min(y1, y2));
              const ye = Math.trunc(Math.max(y1, y2));
              this.setHorizontalLine(xs, xe, ys, c);
              if (ys != ye) {
                  this.setVirticalLine(xs, ys+1, ye-1, c);
                  if (xs != xe)
                      this.setVirticalLine(xe, ys+1, ye-1, c);
                  this.setHorizontalLine(xs, xe, ye, c);
              };
          };

          // 四角形で塗りつぶす.
          setBoxFill(x1, y1, x2, y2, c) {
              const w = this.width;
              const h = this.height;
              const pixel = this.pixel;
              const xs = Math.min(x1, x2);
              const xe = Math.max(x1, x2);
              const ys = Math.min(y1, y2);
              const ye = Math.max(y1, y2);
              if ((xe < 0) || (w <= xs) ||
                  (ye < 0) || (h <= ys))
                  return;
              const us = Math.trunc(Math.max(xs, 0));
              const ue = Math.trunc(Math.min(xe, w-1));
              const vs = Math.trunc(Math.max(ys, 0));
              const ve = Math.trunc(Math.min(ye, h-1));
              const nu = (ue - us) + 1;
              const nv = (ve - vs) + 1;
              let vp = vs * w + us;
              const vq = nv * w + vp;
              for (; vp < vq; vp += w)
                  pixel.fill(c, vp, vp + nu);
          };

          // 円描画用の座標情報を生成する.
          static getCirclePos(radius) {
              if (radius <= 0)
                  return [[0, 0]];

              let x = radius;
              let y = 0;
              let s = 0;
              let t = 1;
              let u = (radius << 1) - 1;
              let v = u;

              /* 大きな円は（上下左右）端の直線を少し短くする */
              u -= ((u >> 2) + (u >> 3) + (u >> 4));

              let otmp = new Array();
              const out1 = new Array();
              const out2 = new Array();
              while (x > y) {
                  otmp.push(y);
                  out2.push([x]);
                  y = y + 1;
                  s = s + t;
                  t = t + 2;
                  if (s < u)
                      continue;
                  out1.push(otmp);
                  x = x - 1;
                  v = v - 2;
                  u = u + v;
                  otmp = new Array();
              };
              if (x == y)
                  out2.push([x]);
              if (otmp.length)
                  out1.push(otmp);
              out1.reverse();
              return out2.concat(out1);
          };

          // 円を描く.
          setCircle(x, y, r, c) {
              const w = this.width;
              const h = this.height;
              if (((x + r + 1) < 0) || (w < (x - r)) ||
                  ((y + r + 1) < 0) || (h < (y - r)))
                  return;

              const pixel = this.pixel;
              const ypos = this.S.getCirclePos(r);
              const ylen = ypos.length;
              {
                  let yi = 0;
                  let ys = y;
                  if (ys < 0) {
                      yi = -ys;
                      ys = 0;
                  };
                  let yp = ys * w;
                  while (yi < ylen) {
                      if (ys >= h)
                          break;
                      for (const xp of ypos[yi]) {
                          const xl = x - xp;
                          const xr = x + xp;

                          if (w <= xl) continue;
                          if (xr < 0) continue;
                          if (xr < w) pixel[yp + xr] = c;
                          if (0 <= xl) pixel[yp + xl] = c;
                      };
                      yi++;
                      ys++;
                      yp += w;
                  };
              };
              {
                  let yi = 0;
                  let ys = y;
                  if (ys >= h) {
                      yi += (ys - h + 1);
                      ys = h - 1;
                  };
                  let yp = ys * w;
                  while (yi < ylen) {
                      if (ys < 0)
                          break;
                      for (const xp of ypos[yi]) {
                          const xl = x - xp;
                          const xr = x + xp;

                          if (w <= xl) continue;
                          if (xr < 0) continue;
                          if (xr < w) pixel[yp + xr] = c;
                          if (0 <= xl) pixel[yp + xl] = c;
                      };
                      ys--;
                      yi++;
                      yp -= w;
                  };
              };
          };

          // 円で塗りつぶす.
          setCircleFill(x, y, r, c) {
              const w = this.width;
              const h = this.height;
              if (((x + r + 1) < 0) || (w < (x - r)) ||
                  ((y + r + 1) < 0) || (h < (y - r)))
                  return;

              const pixel = this.pixel;
              const ypos = this.S.getCirclePos(r);
              const ylen = ypos.length;
              {
                  let yi = 0;
                  let ys = y;
                  if (ys < 0) {
                      yi = -ys;
                      ys = 0;
                  };
                  let yp = ys * w;
                  while (yi < ylen) {
                      if (ys >= h)
                          break;
                      const yl = ypos[yi];
                      const xp = yl[yl.length - 1];
                      let xl = x - xp;
                      let xr = x + xp;
                      if ((0 <= xr) && (xl < w)) {
                          if (xl < 0) xl = 0;
                          if (xr >= w) xr = w - 1;
                          pixel.fill(c, yp + xl, yp + xr + 1);
                      }
                      yi++;
                      ys++;
                      yp += w;
                  };
              };
              {
                  let yi = 0;
                  let ys = y;
                  if (ys >= h) {
                      yi += (ys - h + 1);
                      ys = h - 1;
                  };
                  let yp = ys * w;
                  while (yi < ylen) {
                      if (ys < 0)
                          break;
                      const yl = ypos[yi];
                      const xp = yl[yl.length - 1];
                      let xl = x - xp;
                      let xr = x + xp;
                      if ((0 <= xr) && (xl < w)) {
                          if (xl < 0) xl = 0;
                          if (xr >= w) xr = w - 1;
                          pixel.fill(c, yp + xl, yp + xr + 1);
                      }
                      ys--;
                      yi++;
                      yp -= w;
                  };
              };
          };

          // 凸多角形を描画する.
          setPolygon(vertices, c) {
              const w = this.width;
              const h = this.height;
              const pixel = this.pixel;
              const vlen = vertices.length;
              if (!vlen) return;

              let xmin = w, xmax = -1;
              let ymin = h, ymax = -1;
              for (const [x, y] of vertices) {
                  xmin = Math.min(xmin, x);
                  xmax = Math.max(xmax, x);
                  ymin = Math.min(ymin, y);
                  ymax = Math.max(ymax, y);
              };
              xmin = Math.trunc(xmin);
              xmax = Math.trunc(xmax);
              ymin = Math.trunc(ymin);
              ymax = Math.trunc(ymax);
              if ((xmax < 0) || (w <= xmin) ||
                  (ymax < 0) || (h <= ymin))
                  return;

              const raster = [...Array(h)].map(() => []);
              let [nx, ny] = vertices[vlen - 1];
              for (const np of vertices) {
                  const lx = nx;
                  const ly = ny;
                  [nx, ny] = np;

                  const ay = (ny < ly) ? -1 : +1;
                  const dx = nx - lx;
                  const dy = (ay < 0) ? (ly - ny) : (ny - ly);

                  if (dy == 0) {
                      // if ((0 <= ly) && (ly < h))
                      //     raster[ly].push(lx, nx);
                      continue;
                  };

                  let ys = ly;
                  let ye = ny;
                  let yp = 0;
                  if (ay >= 0) {
                      if ((ye < 0) || (h <= ys))
                          continue;
                      if (ys < 0) {
                          yp -= ys;
                          ys = 0;
                      };
                      if (ye >= h)
                          ye = h - 1;
                  } else {
                      if ((ys < 0) || (h <= ye))
                          continue;
                      if (ys >= h) {
                          yp += ys - h + 1;
                          ys = h - 1;
                      };
                      if (ye < 0)
                          ye = -1;
                  };
                  for (; ys != ye; ys += ay, yp++)
                      raster[ys].push(lx + Math.trunc(dx * yp / dy));
              };

              const rcmp = ((a, b) => (a - b));
              let rs = Math.trunc(Math.max(ymin, 0));
              let re = Math.trunc(Math.min(ymax, h - 1));
              for (let yp = rs * w; rs <= re; yp += w) {
                  const rp = raster[rs++];
                  const rplen = rp.length;
                  if (rplen == 1) continue;
                  rp.sort(rcmp);
                  for (let np = 0; np < rplen; np += 2) {
                      let xl = rp[np];
                      let xr = rp[np + 1];
                      if (xl > xr)
                          [xl, xr] = [xr, xl];
                      if ((xr < 0) || (w <= xl))
                          continue;
                      if (xl < 0) xl = 0;
                      if (xr >= w) xr = w - 1;
                      pixel.fill(c, yp + xl, yp + xr + 1);
                  }
              };
          };

          // インターレース画像を作成する.
          createInterlaced() {
              const tab = this.S.createInterlaceTable(h);
              const w = this.width;
              const h = this.height;
              const pixel = this.pixel;
              const line = [...Array(h)].map(
                  function(_, y) { const p = y * w; return pixel.slice(p, p + w); });
              return [...Array(h)].map((_, y) => line[tab[y]]).flat();
          };

          // GIF 処理用オブジェクトを作成する.
          createGIF(global_color) {
              const color = (global_color ? this.color : undefined);
              return new this.GIF(this.width, this.height, (8 - 1), 0, color);
          };

          // Image Descriptor を作成する.
          createImageDescriptor(local_color, x, y, interlace) {
              const color = (local_color ? this.color : undefined);
              const w = this.width;
              const h = this.height;
              const pixel = this.pixel;
              const data = (!interlace ? pixel : this.createInterlaced());
              return this.GIF.createImageDescriptor(x, y, w, h, data, color, interlace);
          };
      };

      /* ********************************** */

      /*
       * テスト
       */

      function createImgWithBase64(b64s, id) {
          const priority = 'important';
          const img = document.createElement('img');
          if (id != undefined)
              img.setAttribute('id', id);
          img.setAttribute('class', 'b64img');
          img.setAttribute('src', 'data:image/gif;charset=utf-8;base64,' + b64s);
          img.style.setProperty('margin', '0', priority);
          img.style.setProperty('padding', '8px', priority);
          img.style.setProperty('image-rendering', 'pixelated', priority);
          return img;
      }

      function intRand(w) { return Math.trunc(Math.random() * w); }

      function makeSampleGIF(fb) {
          const gif = fb.createGIF(true);
          gif.appendDescriptor(fb.createImageDescriptor());
          gif.appendTrailer();
          return gif;
      }

      function makeSample1FB() {
          const fb = new MyPixelBuffer(MyPixelBuffer.grayScaleColor256, 640, 480);
          for (let p = 0; p < 256; p++) fb.setBox(p, p, 639-p, 479-p, p);
          return fb;
      }
      function makeSample1() { return makeSampleGIF(makeSample1FB()); }

      function makeSample2FB() {
          const fb = new MyPixelBuffer(MyPixelBuffer.simpleColor, 640, 480);
          for (let n = 0; n < 20; n++) {
              const x1 = intRand(640 + 320) - 160;
              const y1 = intRand(480 + 240) - 120;
              const w = intRand(320) + 16;
              const h = intRand(240) + 16;
              const c = intRand(256);
              const x2 = x1 + w;
              const y2 = y1 + h;
              fb.setLine(x1, y1, x2, y2, c);
              fb.setLine(x2, y1, x1, y2, c);
              fb.setBox(x1, y1, x2, y2, c);
              fb.setCircle(y1, x1, Math.min(x2, y2), c);
          }
          return fb;
      }
      function makeSample2() { return makeSampleGIF(makeSample2FB()); }

      function makeSample3FB() {
          const fb = new MyPixelBuffer(MyPixelBuffer.simpleColor, 640, 480);
          for (let n = 0; n < 100; n++) {
              const x = intRand(640+32) - 16;
              const y = intRand(480+32) - 16;
              const w = intRand(160);
              const h = intRand(120);
              const c = intRand(256);
              fb.setBoxFill(x, y, x+w, y+h, c);
          }
          return fb;
      }
      function makeSample3() { return makeSampleGIF(makeSample3FB()); }

      function makeSample4FB() {
          const fb = new MyPixelBuffer(MyPixelBuffer.simpleColor, 640, 480);
          for (let n = 0; n < 100; n++) {
              const x = intRand(640 + 320) - 160;
              const y = intRand(480 + 240) - 120;
              const r = intRand(80);
              const c = intRand(256);
              fb.setCircleFill(x, y, r, c);
          }
          return fb;
      }
      function makeSample4() { return makeSampleGIF(makeSample4FB()); }

      function makeSample5FB() {
          const fb = new MyPixelBuffer(MyPixelBuffer.simpleColor, 640, 480);
          for (let n1 = 0; n1 < 100; n1++) {
              const np = intRand(5) + 3;
              let x = intRand(640 + 320) - 160;
              let y = intRand(480 + 240) - 120;
              const c = intRand(256);
              const pl = new Array([x, y]);
              let da = intRand(360);
              let ra = 300;
              for (let n2 = 1; n2 < np; n2++) {
                  const dr = da * Math.PI / 180;
                  const dl = intRand(120) + 10;
                  const dx = Math.trunc(dl * Math.cos(dr));
                  const dy = Math.trunc(dl * Math.sin(dr));
                  pl.push([(x += dx), (y += dy)]);
                  const ma = Math.trunc(ra / (np - n2)) >> 1;
                  const na = intRand(ma) + ma;
                  da += na;
                  ra -= na;
              }
              fb.setPolygon(pl, c);
          }
          fb.setPolygon([[10, 10], [100, 10], [10, 100]], 255);
          // fb.setPolygon([[640-10, 480-10], [640-100, 480-10], [640-100, 480-100], [640-10, 480-100]], 0x1c);
          fb.setPolygon([[640-10, 480-10], [640-100, 480-10], [640-10, 480-100]], 255);
          // fb.setPolygon([[640-10, 10], [10, 150], [640-150, 480-10]], 0x03);
          return fb;
      }
      function makeSample5() { return makeSampleGIF(makeSample5FB()); }

      function makeSampleA() {
          const fb1 = makeSample1FB();
          const fb2 = makeSample2FB();
          const fb3 = makeSample3FB();
          const fb4 = makeSample4FB();
          const fb5 = makeSample5FB();
          const gif = fb2.createGIF();
          gif.appendApplicationExtensionForLoop(0);
          gif.appendGraphicControlExtension(30);
          gif.appendDescriptor(fb1.createImageDescriptor(true));
          gif.appendGraphicControlExtension(30);
          gif.appendDescriptor(fb2.createImageDescriptor(true));
          gif.appendGraphicControlExtension(30);
          gif.appendDescriptor(fb3.createImageDescriptor(true));
          gif.appendGraphicControlExtension(30);
          gif.appendDescriptor(fb4.createImageDescriptor(true));
          gif.appendGraphicControlExtension(30);
          gif.appendDescriptor(fb5.createImageDescriptor(true));
          gif.appendTrailer();
          return gif;
      }

      function setSample(id, gif) {
          const tag = document.getElementById(id);
          if (tag == undefined) return;

          const img = createImgWithBase64(MyBase64.encode(gif().get_binary()));
          while (tag.firstChild)
              tag.removeChild(giftag.firstChild);
          tag.append(img);
      }

      function onLoad() {
          setSample('sample1', makeSample1);
          setSample('sample2', makeSample2);
          setSample('sample3', makeSample3);
          setSample('sample4', makeSample4);
          setSample('sample5', makeSample5);
          setSample('sampleA1', makeSampleA);
      }
      onLoad();

      /* ********************************** */

      // !-->
    </script>
  </body>
</html>