javascript - 绘制与公共(public)区域相同颜色的碰撞透明圆圈

Question

当我为每个圆圈使用 fill() 逐个绘制相同颜色的圆圈时。当它们重叠时，常见的情况是颜色变暗(饱和)。参见示例 1(左)in JS Bin .

如果我创建长路径，然后对这个公共(public)路径使用 fill() ，它会产生奇怪的工件(是的，当然它会被复杂的路径混淆，并且不知道我要绘制什么)参见示例 2(右)in JS Bin .

我如何才能实现具有相同颜色的圆圈的公共(public)区域不饱和，它不应该比其他具有相同颜色的圆圈更暗。 (正是我所拥有的 in JS Bin 右侧，但没有疯狂的伪影)

如果不同颜色的圆圈有共同区域，则颜色应该饱和。

Answer 1

关于您的.getImageData解决方案...

使用合成比 .getImageData 来混合颜色更快。

这是一个组合重叠半透明圆圈而不使重叠变暗的函数。

• 在第二 block Canvas 上以不透明颜色绘制所有颜色相同的圆圈。
• 设置context.globalCompositeOperation='source-in'，这会导致新绘图替换现有像素。
• 在第二个 Canvas 上为这组颜色相同的圆圈填充所需的半透明颜色。

结果是一组重叠的圆圈，没有变暗效果。

function uniformColorCircles(circles){
    var PI2=Math.PI*2;
    tempctx.globalCompositeOperation='source-over';
    tempctx.clearRect(0,0,cw,ch);
    tempctx.beginPath();
    for(var i=0;i<circles.length;i++){
        var c=circles[i];
        tempctx.arc(c.x,c.y,c.radius,0,PI2);
    }
    tempctx.fillStyle='black';
    tempctx.fill();
    tempctx.globalCompositeOperation='source-in';
    tempctx.fillStyle=circles[0].rgba;
    tempctx.fill();
}

这里是示例代码和涉及多组半透明圆圈的演示:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

ctx.fillRect(0,0,120,220);

var tempCanvas=canvas.cloneNode();
var tempctx=tempCanvas.getContext('2d');

var c1={x:100,y:200,radius:50,rgba:'rgba(255,0,0,0.5)'};
var c2={x:100,y:240,radius:35,rgba:'rgba(255,0,0,0.5)'};
var c3={x:140,y:200,radius:50,rgba:'rgba(0,255,255,0.5)'};
var c4={x:140,y:240,radius:35,rgba:'rgba(0,255,255,0.5)'};
var c5={x:120,y:140,radius:50,rgba:'rgba(255,255,0,0.5)'};
uniformColorCircles([c1,c2]);
ctx.drawImage(tempCanvas,0,0);
uniformColorCircles([c3,c4]);
ctx.drawImage(tempCanvas,0,0);
uniformColorCircles([c5]);
ctx.drawImage(tempCanvas,0,0);


function uniformColorCircles(circles){
    var PI2=Math.PI*2;
    tempctx.globalCompositeOperation='source-over';
    tempctx.clearRect(0,0,cw,ch);
    tempctx.beginPath();
    for(var i=0;i<circles.length;i++){
        var c=circles[i];
        tempctx.arc(c.x,c.y,c.radius,0,PI2);
    }
    tempctx.fillStyle='black';
    tempctx.fill();
    tempctx.globalCompositeOperation='source-in';
    tempctx.fillStyle=circles[0].rgba;
    tempctx.fill();
}

body{ background-color:white; }
#canvas{border:1px solid red; }

<canvas id="canvas" width=512 height=512></canvas>