单击图像区域可更改该区域的颜色

Question

如何在网站中实现类似于此gif中显示的功能？

具体而言，用户点击图像的（非矩形）区域然后该区域会改变颜色。

很久很久以前，当互联网还很年轻时，有一种叫做图像地图的东西。这仍然是首选方法吗？我听说过svg，它提供了这种功能吗？画布怎么样？

Answer 1

我不了解图像地图以使它们处于这种形状的命中区域。 但我建议在这些类型的应用程序中使用canvas。

Answer 2

你有多种选择，其中一种是图像映射。但是，我不会这样做，现在，有更好的解决方案。

您可以使用之前建议的画布，例如使用像http://fabricjs.com/这样的画布库，或者使用SVG元素可能更容易一些。

SVG的好处是它们在网站中呈现为普通的DOM元素，因此您可以在检查器中进行调试，将正常的点击事件附加到它们，使用CSS设置它们的样式等。

Answer 3

多种选择。

SVGs + CSS

CANVAS动画

FLASH（不建议使用此选项。，相当过时）

普通html css（但是对于不同的形状，将来可以自定义，与其他方式相比，耗费大量时间，并且除非用良好的文档编写，否则会引起混淆。）

html + css方式：你总是可以用css和html制作大部分几何形状。但是，我们有svgs的曲线并使用css / svg过渡视觉效果