如何用javascript编写可悬停的马赛克？

我正试图用我在photoshop中展示的照片编码一幅马赛克。我的意思是，我已经拍摄了一张像素艺术照片，并开始将其划分为标有x、y、w和h属性的“瓷砖”，这样我就可以创建一个显示所有瓷砖的字典变量。然后，通过这些矩形，我制作了一个事件，将它们显示在画布上

然而，我使用了一些人的代码片段进行了轻微的调整，我需要知道如何制作它，以便当您将鼠标悬停在其中一个“瓷砖”上时，而不是将其返回到原始颜色，我需要它保持与悬停时相同的颜色

其次，我在像素艺术中有大约12朵云。我计划分割代码，使每种颜色与各自的瓷砖分割，只使用相同的事件，但它只加载底部的一个。有谁能告诉我如何在不同的变量上多次使用同一事件，或者告诉我如何使我的所有矩形都在同一个变量中

谢谢

var canvas=document.getElementById（“像素艺术”）；
var ctx=canvas.getContext（“2d”）；
var rects=[
{x:0，y:0，w:90，h:40，day:true}，
{x:0，y:40，w:90，h:40，day:true}，
{x:90，y:0，w:40，h:60，白天：真}，
{x:90，y:60，w:40，h:20，白天：真的}，
{x:130，y:0，w:80，h:50，日间：真}，
{x:130，y:50，w:80，h:30，日间：正确}，
{x:180，y:0，w:30，h:50，日间：真}，
{x:210，y:0，w:30，h:30，日间：真}，
{x:210，y:30，w:30，h:50，日间：正确}，
{x:240，y:60，w:30，h:20，白天：真的}，
{x:270，y:60，w:90，h:20，日间：正确}，
{x:240，y:0，w:60，h:60，日间：真}，
{x:300，y:0，w:50，h:60，日间：真}，
{x:350，y:0，w:30，h:30，日间：真}，
{x:350，y:30，w:60，h:30，日间：正确}，
{x:360，y:60，w:30，h:20，白天：真的}，
{x:380，y:0，w:30，h:30，日间：真}，
{x:390，y:60，w:50，h:20，白天：真的}，
{x:410，y:0，w:40，h:30，日间：真}，
{x:410，y:30，w:40，h:30，日间：正确}，
{x:440，y:60，w:20，h:20，白天：真的}，
{x:450，y:0，w:50，h:60，日间：真}，
{x:460，y:60，w:40，h:20，日间：正确}，
{x:500，y:0，w:50，h:40，白天：真}，
{x:500，y:40，w:50，h:40，白天：真的}，
{x:550，y:0，w:40，h:30，day:true}，
{x:550，y:30，w:40，h:50，日间：正确}，
{x:590，y:0，w:50，h:60，日间：真}，
{x:590，y:60，w:100，h:20，日间：正确}，
{x:640，y:0，w:70，h:60，日间：真}，
{x:690，y:60，w:40，h:20，白天：真的}，
{x:710，y:0，w:70，h:30，日间：真}，
{x:710，y:30，w:60，h:30，白天：真的}，
{x:730，y:60，w:40，h:20，白天：真的}，
{x:780，y:0，w:30，h:30，日间：真}，
{x:770，y:30，w:60，h:50，日间：正确}，
{x:810，y:0，w:70，h:30，日间：真}，
{x:830，y:30，w:30，h:50，白天：真的}，
{x:860，y:30，w:20，h:20，白天：真的}，
{x:860，y:50，w:80，h:30，日间：正确}，
{x:880，y:0，w:60，h:50，日间：真}，
{x:940，y:0，w:60，h:30，日间：真}，
{x:940，y:30，w:60，h:50，白天：真的}
]
函数pointInRect（矩形、鼠标位置）{
var返回值=真；
if（mouseLocation.xrectangle.x+rectangle.w）{
返回错误
}
if（mouseLocation.yrectangle.y+rectangle.h）{
返回错误
}
返回真值
}
canvas.onmousemove=函数（e）{
//重要提示：正确的鼠标位置：
var rect=this.getBoundingClientRect（），
x=e.clientX-rect.left，
y=e.clientY-rect.top，
i=0，
R
变量鼠标位置={
x:x，y:y
}
while（r=rects[i++]{
//将单个rect添加到路径：
ctx.beginPath（）；
ctx.rect（r.x，r.y，r.w，r.h）；
//检查我们是否将其悬停，填充红色，如果不填充蓝色
if（pointInRect）{
}
ctx.fillStyle=pointInRect（r，鼠标定位）“#e6c7a8”：“#98c3ee”；
ctx.fill（）；
}
};
/*
var rectsOne=[
{x:0，y:80，w:40，h:60，日间：真}，
{x:0，y:140，w:70，h:40，day:true}，
{x:0，y:180，w:40，h:60，日间：真}，
{x:40，y:80，w:70，h:30，日间：正确}，
{x:40，y:110，w:50，h:30，日间：正确}，
{x:70，y:140，w:90，h:40，日间：正确}，
{x:40，y:180，w:50，h:30，日间：正确}，
{x:40，y:210，w:70，h:30，日间：正确}，
{x:90，y:180，w:60，h:30，日间：正确}，
{x:110，y:210，w:40，h:30，日间：正确}，
{x:110，y:80，w:40，h:30，日间：正确}，
{x:90，y:110，w:30，h:30，日间：正确}，
{x:120，y:110，w:30，h:30，日间：正确}，
{x:150，y:80，w:60，h:60，日间：真}，
{x:160，y:140，w:30，h:40，日间：正确}，
{x:150，y:180，w:40，h:60，日间：正确}，
{x:190，y:140，w:50，h:60，日间：正确}，
{x:210，y:110，w:30，h:30，日间：正确}，
{x:210，y:80，w:50，h:30，日间：正确}，
{x:190，y:200，w:40，h:40，白天：真的}，
{x:230，y:200，w:40，h:40，白天：真的}，
{x:260，y:80，w:30，h:30，日间：正确}，
{x:240，y:110，w:50，h:50，日间：正确}，
{x:240，y:160，w:60，h:40，白天：真的}，
{x:270，y:200，w:60，h:40，日间：正确}，
{x:290，y:80，w:30，h:40，白天：真的}，
]   
canvas.onmousemove=函数（e）{
//重要提示：正确的鼠标位置：
var rect=this.getBoundingClientRect（），
x=e.clientX-rect.left，
y=e.clientY-rect.top，
i=0，
R
变量鼠标位置={
x:x，y:y
}
while（r=rectsOne[i++]{
//向p添加一个rect