HTML5 Canvas globalCompositeOperation用于覆盖不增加更高强度的渐变？

Question

我正在研究heatmap.js修复,我想知道是否有人知道是否有可能用<canvas>2d渲染上下文来实现以下效果.

• 我有一个从黑色(alpha 0.5)到透明40像素半径的径向渐变.径向梯度的中心在x = 50,y = 50
• 我有另一个从黑色(alpha 0.5)到透明,40像素半径的径向渐变.径向梯度的中心位于x = 80,y = 50

两个梯度重叠.我现在的问题是:重叠区域加在一起导致比径向渐变中心更高的alpha值,从而显示错误的数据(例如,由于渐变之间的那些添加,热图中的较热区域)

看看下面的要点,通过在控制台中执行它,您可以看到问题.

预期的行为将是:最暗的区域是渐变中心,两个渐变的重叠区域合并但不会加起来.

在看到没有globalCompositeOperations导致预期的行为后,我尝试了这些操作的组合.我认为可能的方式可能如下:

• 绘制第一个渐变
• 使用compositeOperation'destination-out'
• 绘制第二个渐变 - >从第一个渐变中减去重叠区域
• 使用compositeOperation'source-over'
• 再次绘制第二个渐变

但不幸的是,我没有找到一个有效的组合.我很想听听您的反馈,提前谢谢!

PS:我知道这可以通过手动操作像素来完成,但我想知道是否有更简单,更优雅和更快的解决方案.

Answer 1

这真的很古怪,但它可以做你想要的而不涉及imageData.

我想到的是,当你抚摸它们时,你想要路径本身在画布上具有的确切功能.引用规范:

由于定义了跟踪路径的算法的结果,在一个笔划操作中路径的重叠部分被视为它们的联合是被绘制的.

你可以在这里阅读更多相关信息.

无论如何,你想要的东西,基本上是一条模糊的道路,除了弧线,你可以抚摸一次,你完全得到你想要的效果.

唯一的问题是无法在画布中制作模糊路径.或者几乎没有办法.

我们可以使用路径的阴影代替使用路径本身,以模拟符合路径相同规则的模糊圆圈.

那么唯一的问题是,你不想看到实际的路径,你只是想看到它的阴影.使笔划透明不起作用:阴影只会绘制不会以比阴影更高的不透明度绘制.

但阴影做具有的属性shadowOffsetX和shadowOffsetY,其通常使用的一两个像素的阴影转移到使光源的错觉.

但是如果我们把阴影画得那么遥远而你却看不到呢？或者更确切地说,如果我们画出如此遥远的路径而你却看不到它们,你能看到的只是阴影吗？

好吧,这恰好是诀窍.这是一个快速的结果,您的原始代码位于顶部,阴影是第二个画布:

它不是你以前在渐变和尺寸方面所拥有的,但它非常接近,我确信通过摆弄这些值,你可以更接近它.一些console.log确认我们想要的东西,一个不超过124(在255中)的alpha正确发生在过去曾经是143和134的地方.

在行动中看到代码的小提琴:http://jsfiddle.net/g54Mz/

所以你有它.imageData如果您使用阴影并偏移实际路径以至于它们离开屏幕,则无法获得两个径向渐变的并集效​​果.