使用CSS动态热图像？

Question

我有插图画家的插图。 这是一个静态热图像，有6个特定的点，我想动画（显然根据温度）。

例如，我会更新一个JSON文件，根据这个文件，图像会更新自己：

{
  "sensors": [
    {
      "name": "top",
      "value": 0
    },
    {
      "name": "middle",
      "value": 3
    },
    {
      "name": "bottom",
      "value": 1
    }
  ]
}

还需要更新图像旁边的图例（未显示）。

像this video这样的东西，但结果质量更高。

我正在考虑在CSS中进行此操作，但我不知道如何处理自定义形状，因为插图不是正方形，而径向渐变（like this post）看起来并不像在图像上呈现时很漂亮。

我可能会研究其他任何技术解决方案吗？

Answer 1

IMO你最好的选择是：

• 使用SVG，它是用于二维图形的可缩放矢量图形格式，支持交互性和动画。使用JavaScript动态更改插图画家;您还可以查看动态GSAP或数据驱动可视化D3.js。

• 使用HTML5 Canvas，用于通过JavaScript动态绘制图形（位图格式）。

在这个特定情况下，CSS不适合IMO的工作，因为设计复杂的多点形状并不是它的用例。