3

モノクロのブラウザ内「LED」ディスプレイを作成しています。33x278の「LED」のマトリックスが必要です。各LEDは3x3の「実際の」ピクセルです。プログレスバーと現在時刻をHH:MM形式で表示するか、残り日数を「NN日」形式で表示するために使用されます。また、調整可能です(ユーザーが時間を設定できるようになります)。

これを行うには2つの方法があります。

  1. <canvas>それを使って「LED」を使用して描画します。
  2. <div>「LED」ごとにを使用します。私はそれでそれぞれの「LED」をもっとコントロールできるように感じますが、ほぼ10000div秒の考えは私を幾分怖がらせます。

これらの方法のどれが好ましいのか、そしてその理由を知りたいのですが。それとも別の方法がありますか?

4

1 に答える 1

7

10,000 divはあなたを怖がらせるはずです。それらのそれぞれは、ほんの小さなピクセルであるにもかかわらず、多くの未定義の html 属性と内部ブラウ​​ザー属性とともにブラウザーによって保存され、すべてメモリを消費します。さらに、各 div はブラウザによって「フロー」またはグラフィカルに配置される必要があり、計算時間がかかります。

ピクセルレベルで変更可能なグラフィックスの場合は、 を使用する必要がありますcanvas。これは、グラフィックスが設計および最適化されているものです。

canvasキャンバスにランダムな 3x3 の「ピクセル」を描画する簡単なデモを次に示します。

http://jsfiddle.net/jtbowden/feusZ/

それはそれほど多くのコードではなく、それほど難しくもありません。関数ができたらsetPixel、あとはピクセルでやりたいことを実装するだけです。

これはあなたのディスプレイサイズのバージョンで、キャンバスサイズを自動的に読み取ります:

http://jsfiddle.net/jtbowden/9jQf4/

単一のピクセルを操作したり、非常に短い線を描画したりするなど、これを行う方法は他にもいくつかあります。

于 2012-04-24T17:43:11.000 に答える