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

时间：2018-02-08 09:15:40

标签： javascript html5 css3

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

changing colour of part of image

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

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

3 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：0)

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

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

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

答案 2 :(得分：0)

多种选择。

  • SVGs + CSS
  • CANVAS动画
  • FLASH（不建议使用此选项。，相当过时）
  • 普通html css（但是对于不同的形状，将来可以自定义，与其他方式相比，耗费大量时间，并且除非用良好的文档编写，否则会引起混淆。）

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

    相关问题
    最新问题