从画布是使用和clearRect（）命令它似乎清除区域的唯一途径 - 我需要清除圆（我屏蔽掉来自填充画布的区域，在这个特定的情况下，点光源），尽管所有的尝试它似乎并不可能。

我试着画一个圆圈的alpha值为0，但根本不算什么会出现，除非阿尔法较高（这是违背了这一点：P） - 我假设，因为contex.fill（）绘制它作为一个插件，而不是取代。

我如何可能可以（快速）明确圈子面具的目的有什么建议？

Answer 1:

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

然后你可以使用.clearRect()擦除整个画布，但只有剪切区域会发生变化。

Answer 2:

如果你正在做一个游戏或者挤压的性能问题的每一位的东西，看看我是如何做到这样的回答：帆布-在完全透明的所有区域填充矩形

具体而言，答案的编辑导致此： 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>

Answer 3:

给出的要求，这些答案都是精品。但是，可以说你和我一样，你有额外的要求：

你要“清除”一个形状，可能是部分你清除形状的边界之外的部分。
你想看到的形状，而不是清算背景下的背景。

对于第一个要求，解决方案是使用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

Answer 4:

您有几种选择。

首先，这里是我们用来填充圆的功能。

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 。

俩给屏幕上的期望的结果，但是表现并不在我的情况下足够，因为我是绘画和清理了很多圈的一个效果每一帧。最后，我发现了一个不同的方式来获得我想要的东西通过只是借鉴的圆弧线条较粗类似的效果，但上面仍可能具有不同性能要求的有用的人。

Answer 5:

使用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();

Answer 6:

其中X =左侧位置，Y =合适的位置，R =半径，和CTX =你的画布：

function clearCircle( x , y , r ){
    for( var i = 0 ; i < Math.round( Math.PI * r ) ; i++ ){
        var angle = ( i / Math.round( Math.PI * r )) * 360;
        ctx.clearRect( x , y , Math.sin( angle * ( Math.PI / 180 )) * r , Math.cos( angle * ( Math.PI / 180 )) * r );
    }
}

文章来源: clearing circular regions from HTML5 Canvas