用css & html还是画布绘制风力发电机？

Question

我在找你的建议。我得画个风力发电机。我猜它可能与html，css或画布，但它可能需要很长时间。

我想要做的只是图像，有主图像的生成器，然后有其他的图像超过主要的一个。我认为这是实现这一目标的最简单的方法。

它也必须有反应能力。

​

​

小块根据数据改变颜色。因此，我正在考虑根据它来替换图像。

有推荐吗？提前谢谢。

Answer 1

你可以用多种方式剥去这只猫的皮，但是如果你确信这些都是你需要的组件(而且你不需要继续扩展它)，我同意画布太过分了。

可能您所需要的只是这样的标记：

<div id="turbine">
    <div id="injector"></div>
    <div id="motor"></div>
    <div id="block"></div>
    <div id="battery"></div>
</div>

一些像这样的CSS：

#turbine {
    background: url("turbine-main.png");
    position: relative;
}
#injector {
    background: url("injector-green.png");
    position: absolute;
    left: 160px;
    top: 130px;
    width: 40px;
    height: 30px;
}
#injector.failing {
    background: url("injector-red.png");
}
#motor {
    background: url("motor-green.png");
    position: absolute;
    left: 220px;
    top: 140px;
}
#motor.failing {
    background: url("motor-red.png");
}

对每个部分进行漂洗和重复(根据需要调整图像名称、坐标和大小，这样您的作品就能很好地与主图像相匹配)。添加并删除各个片段中的failing类，以切换每个部分的红色/绿色，可能使用javascript。(或者只需在HTML中执行，如果这是一个静态呈现的页面。)

如果您应该能够单击这些引擎部件并跳转到其他信息，请将我的<div>替换为<a>。