使用CSS的动态热图像？

-1

我有一个插图制作的插图。这是一个具有6个特定点的静态热图像，我希望进行动画显示（根据温度明显）。使用CSS的动态热图像？

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

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

这也将需要更新图像旁边的传说（不显示）。

类似this video，但质量更高。

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

我可能会考虑的任何其他技术解决方案？

来源

2017-07-27 Stéphane J.

IMO你最好的选择是：

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

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

来源

2017-07-27 08:57:13 GibboK

使用CSS的动态热图像？

回答

相关问题