如何在HTML5画布中剪裁INSIDE形状？ [英] How can I clip INSIDE a shape in HTML5 canvas?

问题描述

我发现了一些剪辑弧线外区域的例子（例如： ：

结果： b
$ b

与剪辑相同 destination-out 删除像素。

复合模式：xor

在这种情况下使用 xor ，其中存在透明像素（见在线示例）：

只有alpha值被反转。因为我们没有固体像素，alpha不会从255到0（ 255 - 255 ），但 255 - 实际值



（如果您以相同的模式绘制第二次，则已删除像素将被还原，这可以以其他方式使用）。

I've found a number of examples for clipping the outside region of an arc (e.g.: this example). I can't seem to figure out how to clip inside the arc shape instead.

Here is an example of how I'm currently clipping the outside region, which is essentially the opposite of what I want:

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

解决方案

Available options

For irregular shapes you can use two techniques:

1. Composite mode
2. Clipping

IMHO the better choice to use the actual clipping mode or the composite mode destination-out.

As markE says in his answer xor is available too, but xor only inverts alpha pixels and doesn't remove the RGB pixels. This works for solid images with no transparency, but where you have existing pixels with transparency these might give you the opposite effect (becoming visible) or if you later use xor mode with something else drawn on top the "clipped" area will show again.

Clipping

By using clipping you can simply use clearRect to clear the area defined by the path.

Example:

/// 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();

ONLINE DEMO FOR CLIPPING

Source image: an image that has partial semi-transparent pixels and full transparent where the white from background comes through -

Result:

We punched a hole in it and the background shows through:

Composite mode: destination-out

Using composite mode destination-out will clear the pixels as with clipping:

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';

ONLINE DEMO FOR COMPOSITE MODE:

Result:

Same as with clipping as destination-out removes the pixels.

Composite mode: xor

Using xor in this case where there exists transparent pixels (see online example here):

Only the alpha values was inverted. As we don't have solid pixels the alpha won't go from 255 to 0 (255 - 255) but 255 - actual value which result in non-cleared background using this mode.

(if you draw a second time with the same mode the "removed" pixels will be restored so this can be utilized in other ways).

这篇关于如何在HTML5画布中剪裁INSIDE形状？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！