Javascript 如何处理地图上的道路着色？

假设我们有一个虚拟地图，如下所示：

                <img id="img-map" src="/img/maps/mymap.png" alt="" usemap="#Map" />
                <map name="Map" id="Map">
                    <area alt="" title="Babuka" href="" shape="poly" coords="189,433,179,456,185,479,208,484,235,481,236,459,217,439" />
                    <area alt="" title="Sheldonka" href="" shape="poly" coords="304,277,297,294,301,309,321,314,341,312,341,296,326,279" />
                    <area alt="" title="Herceg" href="" shape="poly" coords="95,278,114,287,128,283,128,275,122,267,104,262,95,269" />
                    <area alt="" title="Babuka elment Sheldonkahoz" href="#" shape="poly" coords="220,494,227,500,247,494,268,486,283,477,305,468,321,458,336,451,345,444,355,429,357,416,353,403,345,389,329,359,312,335,307,328,305,326,313,327,321,327,329,326,335,326,337,317,323,317,313,318,302,320,293,319,293,327,300,333,306,339,310,351,320,364,327,372,333,384,337,392,341,400,342,407,345,413,345,417,345,423,345,428,339,439" />
                </map>

这只是一个例子，地图可以有不同的内容和/或大小。让我们假设我们知道每个房子的位置，它位于一个圆、一个矩形或一个多边形中。让我们进一步假设，我们想要“设置从任意房屋1到任意房屋2的行走动画”

通过“设置行走动画”，我的意思是，从house1开始到house2结束的道路应暂时着色，比如说，以连续方式变为红色，也就是说，动画应获得以下参数：

• 1号住宅
• 房子2
• 时间

道路部分不应立即着色，而应基于时间变量。道路最初不应上色，然后经过t时间后，道路的t/时间应上色，方向为house1->house2

我想用一张地图，像这样：

                <img id="img-map" src="/img/maps/mymap.png" alt="" usemap="#Map" />
                <map name="Map" id="Map">
                    <area alt="" title="Babuka" href="" shape="poly" coords="189,433,179,456,185,479,208,484,235,481,236,459,217,439" />
                    <area alt="" title="Sheldonka" href="" shape="poly" coords="304,277,297,294,301,309,321,314,341,312,341,296,326,279" />
                    <area alt="" title="Herceg" href="" shape="poly" coords="95,278,114,287,128,283,128,275,122,267,104,262,95,269" />
                    <area alt="" title="Babuka elment Sheldonkahoz" href="#" shape="poly" coords="220,494,227,500,247,494,268,486,283,477,305,468,321,458,336,451,345,444,355,429,357,416,353,403,345,389,329,359,312,335,307,328,305,326,313,327,321,327,329,326,335,326,337,317,323,317,313,318,302,320,293,319,293,327,300,333,306,339,310,351,320,364,327,372,333,384,337,392,341,400,342,407,345,413,345,417,345,423,345,428,339,439" />
                </map>

可以为区域创建事件处理程序，这是一件非常好的事情，因为能够捕捉房屋的点击/悬停等事件会很酷，但是我们如何处理上述动画呢？我曾想过在地图上临时显示一块画布，但这似乎太粗糙了。此外，我还考虑将可能的起点/终点保存到道路上每个房子的前面，这样，至少在动画开始时，系统将知道从何处开始和从何处结束。除了知道道路的图案（可能是颜色）外，还可以确定圆弧。基于圆弧，还可以确定其长度和总面积（像素数）。如果我们知道总长度和为动画长度指定的时间，那么动画可以是使用临时像素着色的动画

---

这可以通过使用贴图并在动画完成时临时放置画布来完成，也可以仅使用画布来完成。考虑到预期效果，该如何解决此问题？

首先确定房屋之间的道路路径

查看前一篇文章，它展示了如何确定一组通过道路上的航路点的曲线。这组曲线是html5画布路径

然后沿着该路径计算一组统一的航路点，在道路上行驶

然后看看前面这篇文章，它展示了如何以匀速沿着路径行进

下面是示例代码和演示：

此示例演示如何以匀速沿路径行驶

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var-nextTime=0；
无功延时=1000/60*3；
var ptIndex=0；
var linepts=[{x:50，y:75}，{x:150，y:50}，{x:200，y:100}，{x:100，y:175}，{x:250，y:250}]；
var点=[]；
对于（var i=1；我需要更多关于走道的信息？例如，它们是“徒手”创建的吗在Photoshop或Illustrator中。它们是用矢量路径构建的吗？@markE，这些道路是用Photoshop创建的，房屋的潜在起点和终点将手动定义，它们将是靠近相关房屋的点。我非常感谢你的回答，我（希望）很快会对此进行反思。