javascript - 从 HTML5 Canvas 中清除圆形区域

Question

似乎从画布中清除区域的唯一方法是使用 clearRect() 命令 - 我需要清除一个圆圈（我正在从填充的画布中屏蔽区域，在这种特定情况下为点光源），尽管所有尝试它似乎不可能。

我尝试绘制一个 alpha 值为 0 的圆，但除非 alpha 更高（这与点相反：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

鉴于要求，这些答案很好。但是假设你和我一样，你有额外的要求：

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

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 );
    }
}