需要帮助创建一个绘图工具，使用鼠标拖动和释放在Javascript中绘制像素

Question

嘿!我是一个JavaScript初学者玩DOM，我目前面临的问题，我一直无法找到一个解决方案。我想要的是绘制每个正方形div作为像素/单元格，每当你点击和/或拖动鼠标时，它会改变每个div的背景颜色，就像标准绘画应用程序一样。下面的第一个代码块是我最终使用的，但它不是我想要的，它只能通过逐个点击来绘制每个单独的像素/单元格。我尝试使用EventListener与onmousedown或mouseover嵌套在Click的EventListener内。然而，这并没有成功。我曾希望在点击后，下一个EventListener将被检测到，我将能够像许多其他标准绘图应用程序一样绘制。如果有人能给我指指方向，我将不胜感激。

document.querySelectorAll(".PixelBoxes").forEach(element => {
element.addEventListener("click", () => {
console.log(colorPicker.color.hexString);
element.style.backgroundColor = colorPicker.color.hexString;
})
});

这是我之前试图描述的混乱的不成功的代码。

element.addEventListener("click", () => {
console.log(colorPicker.color.hexString);
element.style.backgroundColor = colorPicker.color.hexString;
document.querySelectorAll(".PixelBoxes").forEach( element => {
element.addEventListener("mouseover", () => {
element.style.backgroundColor = colorPicker.color.hexString;
})
})
}

这里是我的codepen，可以看到所有的作品，我正在工作的与这篇文章相关的部分是在JS部分的第126行(CSS响应式设计可能有点不稳定):https://codepen.io/DawnofSouls/pen/GRXeQRo

如前所述，我想要的是创建某种绘图功能，就像许多标准绘图应用程序一样。起初，我试着把onmousedown或mouseover放在eventlisten click里面，以实现标准的画笔/铅笔工具，最终没有按我想要的方式工作。相反，即使在松开鼠标后，它也会不停地绘制每个像素。

谢谢!: D

Answer 1

这里没有评论，只有提示可以帮助你;)

一开始你需要做伪代码，并且在你开始输入和调试的时候实现你需要避免的意大利面代码的功能。创建一个"the_thing_i_want_to_do">

您需要检测何时释放了clic，并仅在clic打开时应用颜色，例如:

var mouseDown = 0;
document.body.onmousedown = function() { 
++mouseDown;
}
document.body.onmouseup = function() {
--mouseDown;
}

所以里面:element.addEventListener("mouseover", () => {

你可以这样使用:

if(mouseDown){
// change color of destination 
}