两个重叠圆圈的颜色

Question

我正在为游戏创建一个规划工具。想象一下两个2D静态炮位，每秒不同的射程和伤害。我想根据损坏以不同的颜色绘制这些范围，其范围与此http://www.celtrio.com/support/documentation/coverazone/2.1.0/ui.viewmode.heatmapcolorscale.html

类似

我得到了那个使用CSS边界半径的部分。我的问题是，如果范围重叠，重叠区域不会显示组合损坏。

我找到了heatmap.js http://www.patrick-wied.at/static/heatmapjs/，但它不允许您为每个点设置不同的半径。我也找不到关闭梯度的方法......这些枪在其最大范围内的损坏在其最小范围内是相同的。我意识到这通常是热图的一点，但我不太确定我应该用Google搜索。

我想到了一个PHP解决方案，它可以创建一个灰度图像，使用不同的不透明度来表示不同的伤害。然后我会遍历所有像素并根据比例重新着色它们。但那太慢了。当用户在屏幕上拖动枪支时，它需要尽可能接近实时更新。

这可能是一种非常简单的方法，可能是CSS过滤器，但我找不到任何东西。有任何想法吗？谢谢！

Answer 1

CSS是这项工作的错误工具 - 你真的应该使用SVG或Canvas做这样的事情。使用适当的图形系统实现复杂的图形效果要比使用CSS创建的形状进行破解要容易得多。

例如，在SVG中，您只需使用fill功能就可以用您想要的任何颜色填充每个区域。见an example SVG image here。这是一个SVG维恩图，其中重叠区域与父圆圈的颜色完全不同。 Canvas具有类似的功能。

您可能还想考虑使用RaphaelJS或PaperJS等Javascript库来帮助您解决此问题。 （使用Canvas意味着你无论如何都会使用一些Javascript，这也会让SVG更容易使用）。

但是如果你必须使用CSS来做，如果你想要显示元素，这样当颜色相互叠加时颜色会被合并，那么你会想要使用某种不透明效果。

背景为opacity:0.5或rgba颜色。

这就像你用CSS一样好;你将无法在重叠部分获得任意颜色;只是来自分层不透明效果的颜色组合。

Answer 2

如果你看一下heatmap.js的代码，你会发现它的工作原理如下：

1. 使用从透明到百分比不透明的径向渐变（使用点的强度）在画布上绘制圆圈。
2. 灰度图像的彩色图（将每个灰度值转换为256色的数组之一）。

您的问题可以通过相同的方式解决，但在步骤1中绘制一个恒定不透明度和可变半径的圆圈。