javascript - 根据鼠标位置绘制像素

Question

场景:

• 我在浏览器屏幕上有一个大小为 n x n 的区域(例如 500 像素 x 500 像素，即 250,000 像素)。
• 当鼠标滑过该区域时，它会“绘制”所经过的像素。
• 显示填充/未填充像素的百分比
• 可选高级方案:当鼠标滑过已绘制的像素时，将“取消绘制”这些像素，或以不同的颜色绘制这些像素。

解决方案/问题

• 检测、记录和显示场景的最有效方法是什么？
• 定义的区域可以是 div、间隔图像、图像映射、表格、 Canvas ？
• 如何绘制像素？
  • 为每次鼠标移动创建图像或 div
  • 基于像素坐标创建的服务器端图像？
• 每次位置改变时都传递鼠标位置是不是效率太低了？
• 显示 250,000 多个动态像素/对象/数据的有效方法是什么？

Answer 1

查看my recent question对于 Canvas 上的绘图部分，我得到了很多很好的答案。