使用 CSS 的动态热图像？答案

【问题标题】：Dynamic thermal image using CSS?使用 CSS 的动态热图像？
【发布时间】：2017-07-27 07:29:28
【问题描述】：

我有一个插画家制作的插图。这是一张静态热图像，有 6 个特定点，我想对其进行动画处理（显然是根据温度）。

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

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

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

类似于this video，但结果质量更高。

我正在考虑用 CSS 来做，但我不知道如何处理自定义形状，因为插图不是方形的，并且径向渐变 (like this post) 在图像上渲染时看起来并不漂亮.

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

【问题讨论】：

标签： javascript animation svg svg-animate data-representation

【解决方案1】：

IMO 你最好的选择是：

使用 SVG，它是二维图形的可缩放矢量图形格式，支持交互性和动画。使用 JavaScript 动态更改您的插画师；您还可以查看 GSAP 的动画或 D3.js 的数据驱动可视化。
使用 HTML5 Canvas，用于通过 JavaScript 动态绘制图形（位图格式）。

在这种特定情况下，CSS 无法胜任 IMO 的工作，因为设计复杂的多点形状并不是它的真正用例。

【讨论】：