javascript - 使用 javascript 处理动态信息图的好方法？

Question

我目前被分配了一个项目来使用 javascript 创建以下内容，您可以在此处查看最终产品:http://i1245.photobucket.com/albums/gg583/leetpete1994/Infografic-TrafficSources_zpsf50dfa6d.png

我的工作基本上是获取提供的 PDF 并创建一种动态显示图像所传达的数据的方法。数据本身将在别处计算，所以我只需担心接受每个烧杯的值，并适本地填充它们。

我现在的想法:

现在我的想法是使用 Canvas 。我创建了一个烧杯类，然后将 5 个烧杯作为该类的一个实例。这非常有效，我坐在一 block Canvas 上， Canvas 的正确位置有 5 个空烧杯。我将每个烧杯除以 100；然后我可以正确地填充每个像素所需的像素数量，无论它恰好是多少百分比，但这是我遇到问题的地方。每个烧杯都是不同的形状，随着每个烧杯被装满，形状也会发生变化。因此，我很难真正吸取烧杯中的液体。其次，如果我确实设法正确吸入液体，它将覆盖烧杯的细节。如果我先做液体然后再做烧杯，那将是相反的问题。我也尝试过使用两个堆叠的 Canvas 并控制液体的不透明度，但没有运气得到我想要达到的效果。

那么，是否有更好的方法来执行此操作，或轻松地将奇怪的形状绘制到 Canvas 上？我开始认为使用 Canvas 不会是最好的方法。我知道我可以为每个不同液位的图像制作几张图像，但我想避免在最终产品中使用那么多图像。

Answer 1

我认为您应该使用揭示方法来解决问题...

每个空烧杯一张图片，每个装满液体的一张图片以及烧杯的细节。

然后将液体图像放置在底部并向上显示尽可能多的像素..

<div class="beaker">
    <div class="liquid"></div>
</div>

和

.beaker, .liquid {
    background: url('path-to-sprite-image.png') 0 100% no-repeat;
    width:130px;
}
.beaker {
    height:280px;
    position:relative;
}
.liquid {
    background-position: right 100%;
    bottom:0;
    left:0;
    position:absolute;
}

简单演示 http://jsfiddle.net/27E5q/