14

我发现了许多用于裁剪弧的外部区域的示例（例如： this example）。我似乎无法弄清楚如何在弧形内进行剪辑。

这是我当前如何裁剪外部区域的示例，这与我想要的基本相反：

ctx.save();

ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
ctx.clip();

ctx.beginPath();
ctx.lineWidth     = 1;
ctx.shadowBlur    = 10;
ctx.shadowOffsetX = shadowOffset;
ctx.shadowColor   = '#000000';
ctx.strokeStyle   = '#000000';
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
ctx.stroke();

ctx.restore();
4

3 回答 3

17

可用选项

对于不规则形状，您可以使用两种技术：

  1. 复合模式
  2. 剪裁

恕我直言，更好的选择是使用实际剪辑模式或复合模式destination-out。

正如 markE 在他的回答xor中所说的那样，也可以使用，但 xor 只会反转 alpha 像素并且不会删除 RGB 像素。这适用于没有透明度的实心图像，但是如果您有具有透明度的现有像素，这些可能会给您带来相反的效果（变得可见），或者如果您稍后使用 xor 模式并在顶部绘制其他东西，“剪辑”区域将再次显示。

剪裁

通过使用裁剪，您可以简单地使用clearRect清除路径定义的区域。

例子：

/// save context for clipping
ctx.save();

/// create path
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.closePath();

/// set clipping mask based on shape
ctx.clip();

/// clear anything inside it
ctx.clearRect(0, 0, offset, offset);

/// remove clipping mask
ctx.restore();

剪裁在线演示

源图像：具有部分半透明像素和完全透明的图像，背景中的白色通过 -

源图像

结果：

我们在上面打了一个洞，背景显示出来：

剪裁

复合模式：destination-out

使用复合模式destination-out将像剪切一样清除像素：

ctx.beginPath();
ctx.arc(offset * 0.5, offset * 0.5, offset * 0.3, 0, 2 * Math.PI);
ctx.closePath();

/// set composite mode
ctx.globalCompositeOperation = 'destination-out';
ctx.fill();

/// reset composite mode to default
ctx.globalCompositeOperation = 'source-over';

复合模式在线演示：

结果：

目的地

与剪裁相同，因为destination-out删除像素。

复合模式：异或

xor在存在透明像素的情况下使用（请参见此处的在线示例）：

异或模式

只有 alpha 值被反转。由于我们没有实心像素，因此 alpha 不会从 255 变为 0 ( 255 - 255)，但255 - actual value使用此模式会导致背景不清晰。

（如果您以相同的模式第二次绘制，“删除”的像素将被恢复，因此可以以其他方式使用）。

于 2013-09-24T19:44:39.327 回答
10

您当然可以使用样式的“倒置”剪辑形状进行剪辑：只需先绘制屏幕轮廓，然后绘制剪辑路径 - 不使用 beginPath -，然后关闭路径并剪辑。
这样，您描述的形状就是屏幕内的“洞”。
path 函数必须描述一个封闭的路径。

演示在这里：http: //jsfiddle.net/gamealchemist/9DuJL/40/
我们可以看到它甚至可以使用多种形状，只要它们不相交。

标准剪辑示例

还原剪辑示例

代码如下所示：

// clips the canvas with the invert of provided path function
// if pathFunction is an array, remove clips defined by all functions
function clipRevert(pathFunction) {
    ctx.beginPath();
    ctx.rect(0, 0, canvas.width, ctx.canvas.height);
    if (Array.isArray(pathFunction)) pathFunction.forEach(execute);
    else pathFunction();
    ctx.clip();
}


function execute(fn) {
    return fn();
}

使用示例：（将使用圆形的反向剪辑绘制图像）：

function circlePath(x, y, r) {
    ctx.arc(x, y, r, 0, Math.PI * 2, true);
}

window.clipRevertExample = function () {
    ctx.save();
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    clipRevert(circlePath.bind(null, 100, 60, 40));
    ctx.drawImage(img, 0, 0);
    ctx.restore();
}

最后一句话：你实际上可以选择一个任意的基本形状来减去。

于 2013-09-24T23:42:52.813 回答
2

您可以使用 context.globalCompositeOperation="xor" 根据任何路径或绘图从现有图像中删除。

这种合成模式将使用您在应用合成后所做的任何绘图“取消绘制”现有像素。

在这种情况下，现有图像将根据您的弧“未绘制”：

在此处输入图像描述

这是代码和小提琴：http: //jsfiddle.net/m1erickson/9DuJL/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

var img=new Image();
img.onload=function(){
    ctx.save();
    ctx.drawImage(img,0,0);
    ctx.globalCompositeOperation="xor";
    ctx.beginPath();
    ctx.arc(106, 77, 74, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
}
img.src="http://i.imgur.com/gwlPu.jpg";


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=200 height=158></canvas>
</body>
</html>
于 2013-09-24T18:53:58.437 回答