javascript - 向 HTML Canvas 元素中的像素添加事件侦听器

Question

我有一个 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 个元素的数组，其中每个元素都包含当时像素的颜色。下一步是添加一个事件侦听器，该侦听器在每次这些元素之一发生变化时触发，但我不知道该怎么做。

提前致谢

标签： javascripthtmlcanvasp5.js

Answer 1

onMouseDown最好的方法是使用 websocket 在画布上的（或）事件之后拾取鼠标移动的 x、y 坐标onTouchDown并将坐标流式传输到服务器