Javascript 如何获得HTML5画布元素的填充颜色？

有10000个正方形的网格，当光标悬停在任何一个正方形上时，其颜色应改变，并且一旦鼠标光标不再位于上述正方形上，正方形的颜色应恢复为其原始颜色。 因此，要将这些正方形恢复为其原始颜色，我需要它们的填充颜色/样式

尽管画布实际上有一个图案，但网格上的颜色可能是随机的

编辑：仍然没有使用getImageData（）实现该功能，代码已经用该函数编写

代码如下：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“#FF0000”；
var x=0，
i=0；
变量y=0，
j=0；
slotSize=10；
对于（x=0，i=0；i<100；x+=slotSize，i++）{
对于（y=0，j=0；j<100；y+=slotSize，j++）{
如果（（数学地板（i/10））%2==0&&（数学地板（j/10））%2==0）//创建模式需要
{
ctx.fillStyle=“红色”
}否则{
ctx.fillStyle=“黄色”；
}
ctx.strokeRect（x，y，槽尺寸，槽尺寸）；
ctx.fillRect（x，y，slotSize，slotSize）；
}
}
函数getCursorPosition（画布、事件）{
var rect=canvas.getBoundingClientRect（）；
var x=event.clientX-rect.left；
var y=event.clientY-rect.top；
返回{
x:x，
y:y
}
}
var basex=20，
basey=20；
函数占用（样式、行、列）{
log（“使用“+样式调用占用”）
ctx.fillStyle=样式；
cx=插槽大小*行；
cy=插槽大小*列；
ctx.fillRect（cx、cy、slotSize、slotSize）；
ctx.strokeRect（cx、cy、slotSize、slotSize）；
}
变量行=0，
col=0；
功能突出显示（事件）//
{
var coords=getCursorPosition（画布、事件）；
var x=coords.x；
变量y=坐标系y；
如果（行！=数学楼层（x/slotSize）| |列！=数学楼层（y/slotSize））{
var color=getColor（行，列）；//工作异常
占用（颜色、行、列）；//每次高亮显示正方形时，首先保存其原始颜色。然后，取消高亮显示时，只需将颜色应用回原处即可

如果你在某处没有颜色值存储（例如，如果你在像素级上随机构建电路板），您可以随时读取悬停像素的颜色。
您能试着解释一下您在这里要做什么吗？您必须为画布上色吗？是的，画布是游戏的一部分。如果您没有遇到问题，请继续执行它。基本上，我希望悬停功能不会破坏画布的内容。So如果我将光标悬停在一个红方块上，它应该会变为蓝色，一旦我将光标移到该方块上，它应该会恢复为红色方块。因此，只需关注占领和高亮显示功能，如果这使它更容易的话。我想出来了，但该功能是我找不到的，因为你建议转到像素级，我在相关文章解决了我的问题。是的，
getImageData
，但不要在任何情况下都使用它，因为随着画布大小的增加，它会变得非常缓慢。也许你应该在某个地方保留正方形的颜色，而不是读取像素（当然，除非一个正方形等于一个像素），谢谢你的建议。：）