8

抱歉，如果在其他地方问过这个问题，但很难说清楚，所以我找不到任何东西。

有没有办法在画布中实现蒙版？

例如，仅使用形状（无图像）我画了一栋带窗户的房子。我也有一个代表一个人的形状。我希望那个人出现在窗口 - 但显然只有窗口允许的那个人才能看到。其余的将被掩盖。

我想过把房子被窗户占用的部分清空，这样层上有一个真正的洞，这样问题就容易解决了。

但我意识到你不能删除画布中的形状或形状的一部分，只能在旧的东西上绘制新的东西。那么在多层环境中（我正在用 Kinetic.JS 制作游戏），我究竟能做什么？

抱歉，如果其中任何一个解释不当 - 对整个图形来说都是新的。

4

2 回答 2

28

您应该很快了解剪辑和合成，但这些都不是您真正需要的。

相反，您需要学习如何使用非零缠绕数规则创建路径，这是 HTML5 画布使用的。

如果您顺时针绘制路径的一部分，而逆时针绘制另一部分，则可以从路径中“切出”形状。

这是一个带有窗口的示例：

http://jsfiddle.net/simonsarris/U5bXf/

编辑：这里有一些关于非零绕组数规则如何工作的可视化：

在此处输入图像描述

子路径是按一个方向绘制的，路径交叉的地方会填充（或不填充）空格。

如果您将手指放在图形的任何部分，并想象一条线从您的手指伸出到空白处，那条线会多次穿过路径。如果从零开始，每条顺时针路径加 1，每条逆时针路径减 1，则填充区域是所有具有非零数字的区域。上图中给出了这些区域的数字。

于 2012-08-18T20:44:21.233 回答
1

您只需要创建一个剪切路径并在其中绘制您的形状。Mozilla 开发者网络是学习画布的绝佳起点。这是关于剪辑的部分。

我创建了一个基本的小提琴，其中包含我认为您正在尝试创建的示例。

var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillRect(0, 0, 150, 150);

// create a clipping path
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 130);
ctx.lineTo(130, 130);
ctx.lineTo(130, 20);
ctx.clip();

// backgroud in clipped area
ctx.fillStyle = "#11c";
ctx.fillRect(0, 0, 150, 150);

// draw shapes inside clipped area
ctx.translate(75, 90);

ctx.fillStyle = '#f00';

ctx.fillRect(-15, -40, 40, 40);
ctx.fillRect(0, 0, 10, 10);
ctx.fillRect(-25, 10, 60, 60);

希望这会有所帮助，祝你的项目好运！

于 2012-08-18T19:40:02.783 回答