使用.arc创建一个圆形行程，然后使用.clip()，使当前裁剪区域。

然后你可以使用.clearRect()擦除整个画布，但只有剪裁的区域会改变。

如果您正在制作一款游戏或其他需要充分发挥性能的东西，请看看我是如何回答这个问题的：画布 - 在所有完全透明的区域中填充一个矩形

具体来说，导致这个答案的编辑：http : //jsfiddle.net/a2Age/2/

这里的巨大优势：

• 不使用路径（慢）
• 不使用剪辑（慢）
• 不需要保存/恢复（因为没有清除所有状态（1）就无法重置剪辑区域，这意味着您也必须使用保存/恢复）

(1) 我实际上对此有所抱怨，因此resetClip() 已被放入官方规范中，但浏览器实现它还需要一段时间。

代码

var ctx          = document.getElementById('canvas1').getContext('2d'),
    ambientLight = 0.1,
    intensity    = 1,
    radius       = 100,
    amb          = 'rgba(0,0,0,' + (1 - ambientLight) + ')';

addLight(ctx, intensity, amb, 200, 200, 0, 200, 200, radius); // First circle
addLight(ctx, intensity, amb, 250, 270, 0, 250, 270, radius); // Second circle
addLight(ctx, intensity, amb, 50, 370, 0, 50, 370, radius, 50); // Third!

ctx.fillStyle = amb;
ctx.globalCompositeOperation = 'xor';
ctx.fillRect(0, 0, 500, 500);

function addLight(ctx, intsy, amb, xStart, yStart, rStart, xEnd, yEnd, rEnd, xOff, yOff) {
  xOff = xOff || 0;
  yOff = yOff || 0;

  var g = ctx.createRadialGradient(xStart, yStart, rStart, xEnd, yEnd, rEnd);
  g.addColorStop(1, 'rgba(0,0,0,' + (1 - intsy) + ')');
  g.addColorStop(0, amb);
  ctx.fillStyle = g;
  ctx.fillRect(xStart - rEnd + xOff, yStart - rEnd + yOff, xEnd + rEnd, yEnd + rEnd);
}

canvas {
  border: 1px solid black;
  background-image: url('http://placekitten.com/500/500');
}

<canvas id="canvas1" width="500" height="500"></canvas>

鉴于要求，这些答案很好。但是假设您和我一样，并且有其他要求：

1. 您想要“清除”可能部分超出您正在清除的形状边界的形状的一部分。
2. 您希望看到形状下方的背景，而不是清除背景。

对于第一个需求，解决方案是使用context.globalCompositeOperation = 'destination-out' 蓝色是第一个形状，红色是第二个形状。如您所见，destination-out从第一个形状中删除该部分。

下面是一些示例代码：

  explosionCanvasCtx.fillStyle = "red"
  drawCircle(explosionCanvasCtx, projectile.radius, projectile.radius, projectile.radius)
  explosionCanvasCtx.fill()

  explosionCanvasCtx.globalCompositeOperation = 'destination-out' #see https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html
  drawCircle(explosionCanvasCtx, projectile.radius + 20, projectile.radius, projectile.radius)
  explosionCanvasCtx.fill()

这是潜在的问题：第二个fill()将清除它下面的所有内容，包括背景。有时您只想清除第一个形状，但仍想查看其下方的图层。

解决方案是drawImage在临时画布上绘制它，然后将临时画布绘制到主画布上。代码如下所示：

  diameter = projectile.radius * 2
  console.log "<canvas width='" + diameter + "' height='" + diameter + "'></canvas>"
  explosionCanvas = $("<canvas width='" + diameter + "' height='" + diameter + "'></canvas>")
  explosionCanvasCtx = explosionCanvas[0].getContext("2d")

  explosionCanvasCtx.fillStyle = "red"
  drawCircle(explosionCanvasCtx, projectile.radius, projectile.radius, projectile.radius)
  explosionCanvasCtx.fill()

  explosionCanvasCtx.globalCompositeOperation = 'destination-out' #see https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html
  durationPercent = (projectile.startDuration - projectile.duration) / projectile.startDuration
  drawCircle(explosionCanvasCtx, projectile.radius + 20, projectile.radius, projectile.radius)
  explosionCanvasCtx.fill()
  explosionCanvasCtx.globalCompositeOperation = 'source-over' #see https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

  ctx.drawImage(explosionCanvas[0], projectile.pos.x - projectile.radius, projectile.pos.y - projectile.radius) #center

你有几个选择。

首先，这是一个我们将用来填充圆的函数。

var fillCircle = function(x, y, radius)
{
    context.beginPath();
    context.arc(x, y, radius, 0, 2 * Math.PI, false);
    context.fill();
};

clip()

var clearCircle = function(x, y, radius)
{
    context.beginPath();
    context.arc(x, y, radius, 0, 2 * Math.PI, false);
    context.clip();
    context.clearRect(x - radius - 1, y - radius - 1,
                      radius * 2 + 2, radius * 2 + 2);
};

在jsFiddle上看到这个。

globalCompositeOperation

var clearCircle = function(x, y, radius)
{
    context.save();
    context.globalCompositeOperation = 'destination-out';
    context.beginPath();
    context.arc(x, y, radius, 0, 2 * Math.PI, false);
    context.fill();
    context.restore();
};

在jsFiddle上看到这个。

两者都在屏幕上给出了预期的结果，但是在我的情况下性能不够，因为我在每帧绘制和清除很多圆圈以获得效果。最后，我找到了一种不同的方法来获得与我想要的类似效果的方法，只需在圆弧上绘制更粗的线条，但上述方法对于具有不同性能要求的人可能仍然有用。

用于canvas.getContext("2d").arc(...)在带有背景颜色的区域上画一个圆圈？

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(x, y, r, 0, 2*Math.PI, false);
context.fillStyle = "#FFFFFF";
context.fill();