在画布上绘制3个圆的重叠

Question

我需要在没有临时画布的情况下在HTML5画布上绘制以下图像：

使用临时画布很容易，因为我可以独立处理重叠，就像你在这里看到的那样：

Check this jsFiddle

// init
var canvas = document.getElementById('canvas');
var tempCanvas = document.getElementById('tempCanvas');
var ctx = canvas.getContext('2d');
var tempCtx = tempCanvas.getContext('2d');

// draw circle function
var drawCircle = function( c, color ) {
  ctx.beginPath();
  ctx.arc( c.x, c.y, 50, 0, 2 * Math.PI, false );
  ctx.fillStyle = color;
  ctx.fill();
}

// draw overlap function
var drawOverlap = function( c1, c2, color ) {
  tempCtx.clearRect( 0, 0, 300, 300 );
  // first circle
  tempCtx.globalCompositeOperation = 'source-over';
  tempCtx.beginPath();
  tempCtx.arc( c1.x, c1.y, 50, 0, 2 * Math.PI, false );
  tempCtx.fillStyle = color;
  tempCtx.fill();
  // second circle
  tempCtx.globalCompositeOperation = 'destination-in';
  tempCtx.beginPath();
  tempCtx.arc( c2.x, c2.y, 50, 0, 2 * Math.PI, false );
  tempCtx.fill();
  // draw on main canvas
  ctx.drawImage( tempCanvas, 0, 0 );
}

// circle objects
var c1 = { x:100, y: 200 };
var c2 = { x:180, y: 200 };
var c3 = { x:140, y: 140 };

// draw background
ctx.beginPath();
ctx.rect( 0, 0, 300, 300 );
ctx.fillStyle = 'black';
ctx.fill();

// draw circles
drawCircle( c1, 'grey' );
drawCircle( c2, 'white' );
drawCircle( c3, 'white' );

// draw overlaps
drawOverlap( c1, c2, 'red' );
drawOverlap( c1, c3, 'blue' );
drawOverlap( c2, c3, 'blue' );

你知道如何在没有第二个画布的情况下绘制它吗？非常感谢。

---

编辑：

由于@ user13500，我解决了这个问题。边界仍然很难看，但速度非常快：

Check this jsFiddle

Answer 1

您可以在没有使用剪辑区域的临时画布的情况下执行此操作 - context.clip（）

如果您需要，我可以编写解决方案，但既然您知道如何进行合成，那么您可以快速解决问题;）

但更重要的是！ ......

为什么不使用临时画布来禁用工具选择？

你可以做document.createElement（“canvas”）来创建一个甚至在屏幕上看不到的临时画布。

Answer 2

艾，我的头疼。

不是一个很好的解决方案。我猜不是一个人。但如果我们不关心背景，我们就有这个：

Fiddle 更新为新版本，如下所示。

给我们这个：

试图仅使用globalCompositeOperation ;-P

解决此问题

---

编辑：

行。远离它几分钟，我们再来一次。这次是这样的结果。圆圈周围的杂散线仍有问题：

虽然它可能不是你所追求的，但它在这里;-) @markE在涉及该主题的权威时属于另一个领域。

Fiddle.

代码：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var ct = [
    'source-over',         //  0
    'source-in',           //  1
    'source-out',          //  2
    'source-atop',         //  3
    'destination-over',    //  4
    'destination-in',      //  5
    'destination-out',     //  6
    'destination-atop',    //  7
    'lighter',             //  8
    'darker',              //  9
    'copy',                // 10
    'xor'                  // 11
];

ctx.beginPath();
ctx.globalCompositeOperation = ct[0];
ctx.fillStyle = "#888";
ctx.arc(100,200,50,0,2*Math.PI);
ctx.fill();

ctx.beginPath();
ctx.globalCompositeOperation = ct[6];
ctx.fillStyle = "#fff";
ctx.arc(180,200,50,0,2*Math.PI);
ctx.fill();

ctx.beginPath();
ctx.globalCompositeOperation = ct[11];
ctx.fillStyle = "#f00";
ctx.arc(100,200,50,0,2*Math.PI);
ctx.fill();

ctx.beginPath();
ctx.globalCompositeOperation = ct[4];
ctx.fillStyle = "#888";
ctx.arc(100,200,50,0,2*Math.PI);
ctx.fill();

ctx.beginPath();
ctx.globalCompositeOperation = ct[9];
ctx.fillStyle = "#fff";
ctx.arc(180,200,50,0,2*Math.PI);
ctx.fill();

ctx.beginPath();
ctx.globalCompositeOperation = ct[11];
ctx.fillStyle = "#fff";
ctx.arc(140,140,50,0,2*Math.PI);
ctx.fill();

ctx.beginPath();
ctx.globalCompositeOperation = ct[4];
ctx.fillStyle = "#00f";
ctx.arc(140,140,50,0,2*Math.PI);
ctx.fill();

ctx.beginPath();
ctx.globalCompositeOperation = ct[4];
ctx.rect( 0, 0, 300, 300 );
ctx.fillStyle = '#000';
ctx.fill();