【发布时间】：2020-03-06 16:06:18
【问题描述】：
我有一个 500 x 500 像素（总共 250000 像素）的 HTML 画布。
我正在使用 P5 javascript 库在画布上进行一些设计。
我想： 1）为每个像素附加一个ID 2) 每次像素发生变化时，我都想要一个事件来获取：像素的 ID、像素的先前颜色、像素的新颜色以及更改的时间戳
我查看了所有 HTML 事件侦听器，但没有找到可以为我提供此信息的侦听器 - 可能吗？
在任何绘图开始之前，我已经获得了画布的上下文和图像数据：
// canvas instantiated as the canvas element
let context = canvas.getContext('2d')
let imgData = context.getImageData(0, 0, canvas.width, canvas.height)
let data = imgData.data
我认为从我目前所拥有的解释data 的方法是：它是一个包含 250,000 个元素的数组，其中每个元素都包含该时间点的像素颜色。下一步是添加一个事件侦听器，该侦听器在这些元素中的任何一个发生更改时触发，但我不知道该怎么做。
提前致谢
【问题讨论】：
-
画布上的像素不是 DOM 的一部分。通常，事件处理程序附加到 DOM 元素。我认为你的方法行不通。
-
我无法想象任何不需要大量处理时间的方法来检测画布像素变化。您需要获取画布数据的两个快照，比较它们，然后为每个更改吐出事件。由于更改可能涉及许多像素，因此从任何角度来看，这绝对不是一个有效的策略。
-
getImageData()给你一个“截图”，如果你真的想的话，你可以将它与以前的“截图”（过去的）进行比较。但是没有内置事件，p5.js 也没有seem 提供一个。当然，您可以使用计时器setInterval()，但最好描述一下您对跟踪像素变化的期望。 -
我有一个 API，它接受数字 1 - 250000 作为 API 调用的参数并播放相应的声音。我想使用每次像素更改时更改的像素 ID 进行 API 调用
标签： javascript html canvas p5.js