Javascript 高亮显示画布元素中的特定像素

我目前有一个供用户绘制的画布，它位于另一个画布元素上方，其中渲染了一幅图像。当用户在画布上绘制时，将新绘制标记的数据与图像中相应的像素数据进行比较。如果rgba值在某个阈值内，画布像素将更改为不透明，否则将被删除。目标是仅高亮显示图形画布的某些部分，以便仅高亮显示图像阈值内的特定像素。然而，可以说，我无法让绘画标记粘在画布上。画布数据将更新，然后设置保存更改的内容。我真的不确定我做错了什么。这是我的演示：

比较发生在JavaScript文件底部名为

highlightImagePixels

的函数中

---

我还试图避免加载整个像素数据阵列时出现延迟和减速。目标是只选择绘制的像素数据。

在我看来，每次启动鼠标移动功能时，您似乎都在创建一个新的“new_data”变量。是否尝试在函数外部声明该变量？（或者可能是其他新的_canvas_数据）。它所做的就是每次鼠标移动都会覆盖你以前的像素数据。我明白你的意思了。我刚刚将该功能移动到

onmouseup

函数中，但我仍然看到相同的问题。也许你是对的，作用域是问题所在，它需要在事件处理函数之外。很确定是这样的。如果你发现它是，请告诉我，我会写一个关于这个问题的答案？在我看来，每次启动鼠标移动函数时，你都在创建一个新的“new_data”变量。是否尝试在函数外部声明该变量？（或者可能是其他新的_canvas_数据）。它所做的就是每次鼠标移动都会覆盖你以前的像素数据。我明白你的意思了。我刚刚将该功能移动到

onmouseup

函数中，但我仍然看到相同的问题。也许你是对的，作用域是问题所在，它需要在事件处理函数之外。很确定是这样的。如果你发现它是，让我知道，我会写一个这样的答案？