超出边界时的JavaScript画布剪裁形状

我所要求的可能非常简单，但我一直很难得到预期的结果

我想要一个形状（在这个例子中，它是正方形，但应该与其他形状一起工作，如圆等），当它离开另一个形状的边界时，它会将自己切断

基本上，顶部图像是我想要的，底部是我当前拥有的：

我听说这可以通过globalCompositeOperation来实现，但我正在寻找任何能达到预期效果的解决方案

这是当前代码，如果您不能使用JSFIDLE：

// Fill the background
ctx.fillStyle = '#0A2E36';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Fill the parent rect
ctx.fillStyle = '#CCA43B';
ctx.fillRect(100, 100, 150, 150);

// Fill the child rect
ctx.fillStyle = 'red';
ctx.fillRect(200, 200, 70, 70);

// And fill a rect that should not be affected
ctx.fillStyle = 'green';
ctx.fillRect(80, 80, 50, 50);

---

既然您需要对象之间的某种关系（场景图），现在就应该构建它。
从您的问题来看，似乎任何子元素都应该被其父元素剪裁。
（是的，合成操作可能会有帮助，但只有在清晰的背景上绘制两个图形时，合成操作才很方便，否则事情很快就会变得复杂，并且您可能需要使用背面画布，因此这里的剪裁更简单。）

我在下面介绍了一个处理rect情况的最基本类，您会发现构建它并不困难

“场景”由背景矩形组成，有两个孩子，黄色和绿色。黄色的矩形有一个红色的孩子

var canvas=document.getElementById（'cv'）；
var ctx=canvas.getContext（'2d'）；
函数矩形（填充、x、y、w、h）{
var childs=[]；
this.draw=函数（）{
ctx.save（）；
ctx.beginPath（）；
ctx.fillStyle=填充；
ctx.rect（x，y，w，h）；
ctx.fill（）；
ctx.clip（）；
对于（变量i=0；i

---

问题是我不知道把它们放在哪里或使用哪一个，即使在阅读了该指南之后，我也无法达到预期的效果。

ctx.globalCompositeOperation='source-over'ctx.fillStyle='yellow'；ctx.fillRect（10,10,50,50）；ctx.fillStyle='green'ctx.fillRect（0,0,20,20）ctx.globalCompositeOperation='source-top'；ctx.fillStyle='red'ctx.fillRect（40,40,20,20）

你说得对，这样对OP代码的未来会更好。不过需要注意的是，当更多的浏览器支持它时，这应该通过界面来简化。