canvas.jsを解説してみる

クロージャを勉強したとき、たまたま見つけたcanvas.jsです。

• http://0xcc.net/blog/archives/canvas.js

JavaScript とクロージャ（bkブログ）

• http://0xcc.net/blog/archives/000040.html

ソースを読んだので、折角なのでメモしときます。

canvas.jsソース

function makeHandler(element) {
    var depth = 2;
    var closure = function() {
        if (depth <= 16) {
            var c = (16 - depth).toString(16);
            element.style.backgroundColor = "#" + c + c + c;
            depth++;
        }
    }
    return closure;
}

function makeTile(size) {
    var table = document.createElement("table");
    var tbody = document.createElement("tbody");
    for (var i = 0; i < size; ++i) {
        var tr = document.createElement("tr");
        for (var j = 0; j < size; ++j) {
            var td = document.createElement("td");
            td.onmouseover = makeHandler(td);
            tr.appendChild(td);
        }
        tbody.appendChild(tr);
    }
    table.appendChild(tbody);
    return table;
}

function makeCanvas() {
    var canvas = document.getElementById("canvas");
    if (canvas) {
        var tile = makeTile(32);
        canvas.appendChild(tile);
    }
}

function addOnLoadEvent(func) {
  if (window.addEventListener) {
    window.addEventListener("load", func, false);
  } else if (window.attachEvent) {  // for IE
    window.attachEvent("onload", func);
  } else  {
    window.onload = func;
  }
}

addOnLoadEvent(makeCanvas);

http://0xcc.net/blog/archives/000040.html

（ソース引用に問題があればコメントください）

• ページが表示された時、一番はじめに『addOnLoadEvent(makeCanvas);』が実行される。
• addOnLoadEventでは、onload時にmakeCanvas関数が実行されるようにイベントハンドラ登録している。
• イベントハンドラ登録には、３種類のブラウザ仕様に対応している。
  1. Firefoxの対応、『window.onload = func;』。
  2. IEの対応、『window.attachEvent("onload", func);』。
  3. N6の対応、『window.addEventListener("load", func, false);』
• そして、onload時にmakeCanvas関数が実行されるとIDがCanvasのdiv要素へ、makeTileで作成された子要素を追加『canvas.appendChild(tile);』する。
• makeTileは、セル数が32*32のテーブルを作成している。
• ちなみに、セルの幅と高さは、width: 12px height: 12px としている。
• テーブル作成時、セル一つ一つのonmouseoverイベントハンドラをmakeHandlerクロージャでオーバーライドする。
• これで、セル一つ一つにオーバーライドされた各makeHandlerクロージャは、各々backgroundColorの状態を保持するようになる。
• 保持している状態は、該当セルのonmouseoverイベントが発生するたびに、そのbackgroundColorを黒に近づける。
• ちなみに、toString(16)の16は16進数を意味する（確か、昔のtoStringには引数はなかった）。