モノクロのブラウザ内「LED」ディスプレイを作成しています。33x278の「LED」のマトリックスが必要です。各LEDは3x3の「実際の」ピクセルです。プログレスバーと現在時刻をHH：MM形式で表示するか、残り日数を「NN日」形式で表示するために使用されます。また、調整可能です（ユーザーが時間を設定できるようになります）。
これを行うには2つの方法があります。
<canvas>それを使って「LED」を使用して描画します。<div>「LED」ごとにを使用します。私はそれでそれぞれの「LED」をもっとコントロールできるように感じますが、ほぼ10000div秒の考えは私を幾分怖がらせます。これらの方法のどれが好ましいのか、そしてその理由を知りたいのですが。それとも別の方法がありますか？
10,000 divはあなたを怖がらせるはずです。それらのそれぞれは、ほんの小さなピクセルであるにもかかわらず、多くの未定義の html 属性と内部ブラウザー属性とともにブラウザーによって保存され、すべてメモリを消費します。さらに、各 div はブラウザによって「フロー」またはグラフィカルに配置される必要があり、計算時間がかかります。
ピクセルレベルで変更可能なグラフィックスの場合は、 を使用する必要がありますcanvas。これは、グラフィックスが設計および最適化されているものです。
canvasキャンバスにランダムな 3x3 の「ピクセル」を描画する簡単なデモを次に示します。
http://jsfiddle.net/jtbowden/feusZ/
それはそれほど多くのコードではなく、それほど難しくもありません。関数ができたらsetPixel、あとはピクセルでやりたいことを実装するだけです。
これはあなたのディスプレイサイズのバージョンで、キャンバスサイズを自動的に読み取ります:
http://jsfiddle.net/jtbowden/9jQf4/
単一のピクセルを操作したり、非常に短い線を描画したりするなど、これを行う方法は他にもいくつかあります。