シナリオ:
- ブラウザ画面にn x nのサイズ (たとえば 500px x 500px、つまり 250,000 ピクセル) の領域があります。
- マウスが領域上を移動すると、通過するピクセルが「ペイント」されます。
- 塗りつぶされた/塗りつぶされていないピクセルのパーセンテージが表示されます
- オプションの高度なシナリオ: 既にペイントされたピクセルの上にマウスを移動すると、それらのピクセルが「ペイント解除」されるか、それらのピクセルが別の色でペイントされます。
解決策/問題
- シナリオを検出、ログ記録、および表示する最も効率的な方法は何ですか?
- 定義された領域は、div、スペーサー イメージ、イメージ マップ、テーブル、キャンバスでしょうか?
- ピクセルはどのように描画されますか?
- マウスの動きごとに作成されるイメージまたは div
- ピクセル座標に基づいて作成されたサーバー側の画像?
- 位置が変わるたびにマウスの位置を渡すのは非効率的ですか?
- 250,000 以上の動的ピクセル/オブジェクト/データを表示する効率的な方法は何ですか?