为绘图着色的 Javascript 代码。它是如何工作的？

Question

我试图了解，使页面波纹管工作的代码是如何工作的: http://www.coloring.com/online/eagle-head-flag

我所知道的是加载的图像是 png 32 位文件。我试图理解页面上加载的文件 coloring.js 中的代码。但我没有。这样做看起来很简单。

让我更难理解的是，为什么当用户给旗帜上的一颗星星上色时，所有的星星都变成相同的颜色。

我分析了烟花上的图像，它没有层次。所以真的看不懂它是怎么做到的。

我也无法在谷歌上找到任何关于如何做到这一点的简单示例。

至少有人可以帮助我，我在哪里可以找到一个简单的示例。

Answer 1

这在页面上实际上非常简单，因为服务器处理每个区域的“着色”。

当您点击图片时，它会发送一个对此 URL 的图片请求: http://image.coloring.com/pictures/single/eagle-head-flag?color=F69679&x=449&y=263

其中color是您当前的颜色，x和y是您点击的坐标。

服务器返回一张图片，其中包含您点击的元素的颜色为您选择的颜色。然后将该图像放在轮廓图像下。这些是部分透明的，因此可以堆叠。您不断点击，它不断堆叠。

不确定他们是如何在服务器端执行此操作的，以便了解您单击的元素以及他们如何生成图像。

The harder think for me to understand, is why, when the user color one of the flag's stars for example, all of them get the same color.

这是因为服务器将这些星星视为单个元素或区域。同样，它是如何决定的，没有他们的服务器代码就无法知道。

最后，当您点击完成时，它只会生成一个大 URL，其中包含所有颜色编码的区域，服务器可以生成一个图像，其中填充所有内容: http://image.coloring.com/pictures/colored/aXSH3sI2wz9J/IaebaOnG5C/83b6Ulg2/8CwNyM5M/aKSc4Coh/Ojzg1BeO/CWW2uEJ6ao/zcTvWnSc/DXCbJuVU/N5ZrH71ZbuvwmhrH/D3szJmBY/85T0rLZo/1540n/eagle-head-flag.gif