2011/01/02

グラフを書いてみた

HTML5やらjQueryやら、便利なライブラリがあるのは嬉しい限りです。
ただ、それらってどうやって実装してるんだろう。
APIの使い方を理解している、ライブラリの種類を沢山おぼえている、…本当にそれで良いのだろうか。プログラマとして!

ということで、今年は低レベルAPIの実装とかを意識していけたら良いなぁと思ってます(・ω・)

Demo :








Code:
ドットをひたすらならべたようなグラフになっています。
var anim = function() {
// x,y軸の座標作成カウンタ
var i = 0;
// x軸の最大値
var lim = 650;
// グラフコンテナ
var container = document.getElementById('container');
// 座標関数(X)
var getX = function() {
return i;
}
// 座標関数(Y)サインコサインタンジェント
var getY = function() {
return 100 - 100 * Math.sin(0.01 * i);
}

return function() {
var ten = document.createElement('div');
ten.style.left = getX() + 'px';
ten.style.top = getY() + 'px';
ten.className = 'ten';
container.appendChild(ten);

// yは計算回数減らすために変数にとっちゃう。
// やっぱやめる。リミット値まで描画したら処理をストップする。
document.getElementById("prot").innerHTML = "x:" + getX() + " y:" + getY();
if (i < lim) {
i++;
} else {
clearInterval(timer);
}
};
}();
// タイマーセット!
var timer = setInterval(anim, 10);