Javascript 如何在两个多边形的交点处显示图像？

我有一个想法，我正试图用Javascript和html5画布编写一个效果，但我不确定从哪里开始

假设您有多个不同颜色的多边形（现在假设为矩形，但理想情况下为伪随机不规则多边形）。可以通过单击并拖动来移动多边形

当你把一个多边形拖到另一个多边形上时，我想在相交区域显示一个图像。想象一下，将蓝色多边形拖动到红色多边形上以创建紫色区域，除了紫色区域是豹纹图案、照片或类似区域之外

---

任何帮助都将不胜感激！谢谢

使用2d上下文剪辑功能。按正常方式绘制形状，然后再次绘制，但不是在每个形状后使用“填充”，而是使用“剪辑”

每个剪辑应用于上一个剪辑

设置所有剪辑形状后，在顶部绘制图像/形状，仅显示剪辑区域内的零件

要删除剪辑，需要使用“保存并还原”（请参见演示）

使用我刚刚编写的另一个示例中的代码，有点懒惰

示例显示了使用2D上下文的剪辑功能将3个框合并为蓝色

/**SimpleUpdate.js开始**/
//捷径变压器
var ctx=canvas.getContext（“2d”）；
var w=画布宽度；
var h=画布高度；
ctx.font=“18px arial”；
var cw=w/2；//居中
var-ch=h/2；
var角=0；
var=false；
var=false；
//处理所有按键输入
const keys={//键输入对象
ArrowLeft:false，//仅添加要侦听的键名
右箭头：错，
关键事件（事件）{
如果（keys[event.code]！==未定义）{//我们对这个键感兴趣吗
keys[event.code]=event.type==“keydown”；
rotated=true；//关闭帮助
}
}
}
//添加关键侦听器
document.addEventListener（“keydown”，keys.keyEvent）
document.addEventListener（“keyup”，keys.keyEvent）
//检查焦点是否单击
canvas.addEventListener（“单击”，（）=>focused=true）；
//主更新功能
功能更新（计时器）{
setTransform（1,0,0,1,0,0）；//重置转换
ctx.clearRect（0,0，w，h）；
//在盒子外面画
ctx.fillStyle=“红色”
ctx.fillRect（50，50，w-100，h-100）；
//旋转输入
角度+=键。向左箭头？-0.1:0；
角度+=键。向右箭头？0.1:0；
//将orgin设置为画布的中心
setTransform（1，0，0，1，cw，ch）；
//轮换
ctx.旋转（角度）；
//绘制旋转框
ctx.fillStyle=“黑色”
ctx.fillRect（-50，-50100100）；
//将变换设置为中心
setTransform（1，0，0，1，cw，ch）；
//轮换
ctx.旋转（角度）；
//移到拐角处
ctx.translate（50,50）；
//再次旋转，使旋转加倍
ctx.旋转（角度）；
ctx.fillStyle=“黄色”
ctx.fillRect（-40，-40,80,80）；
setTransform（1,0,0,1,0,0）；//还原默认值
//设置剪辑区域
保存（）；//保存未剪辑的画布状态
ctx.beginPath（）；
ctx.rect（50，50，w-100，h-100）；
ctx.clip（）；//剪辑主框
//将orgin设置为画布的中心
setTransform（1，0，0，1，cw，ch）；
ctx.旋转（角度）；
ctx.beginPath（）；
ctx.rect（-50，-50100100）；
ctx.clip（）；//添加到剪辑（减少面积
setTransform（1，0，0，1，cw，ch）；
ctx.旋转（角度）；
ctx.translate（50,50）；
ctx.旋转（角度）；
ctx.beginPath（）；
ctx.rect（-40，-40,80,80）；
ctx.clip（）；
setTransform（1,0,0,1,0,0）；//还原默认值
ctx.fillStyle=“蓝色”
ctx.fillRect（0,0,w,h）；
ctx.restore（）；//这将删除剪辑。这是删除剪辑的唯一方法
//除了重新设置上下文之外
ctx.fillStyle=“白色”
ctx.lineWidth=3；
如果（！聚焦）{
strokeText（“点击画布获得焦点。”，10,20）；
ctx.fillText（“点击画布获得焦点。”，10,20）；
}否则，如果（！旋转）{
ctx.strokeText（“左右箭头旋转。”，10,20）；
ctx.fillText（“旋转的左右箭头”，10,20）；
}否则{
ctx.strokeText（“蓝色是……的联合体”，10,20）；
ctx.fillText（“蓝色是……的联合体”，10,20）；
ctx.strokeText（“…黄色、黑色和红色框）”，10，h-5）；
ctx.fillText（“…黄色、黑色和红色框）”，10，h-5）；
}
requestAnimationFrame（更新）；
}
requestAnimationFrame（更新）；
/**SimpleUpdate.js end**/

---

使用2d上下文剪辑功能。按正常方式绘制形状，然后再次绘制，但不是在每个形状后使用剪辑填充

每个剪辑应用于上一个剪辑

设置所有剪辑形状后，在顶部绘制图像/形状，仅显示剪辑区域内的零件

要删除剪辑，需要使用“保存并还原”（请参见演示）

使用我刚刚编写的另一个示例中的代码，有点懒惰

示例显示了使用2D上下文的剪辑功能将3个框合并为蓝色

/**SimpleUpdate.js开始**/
//捷径变压器
var ctx=canvas.getContext（“2d”）；
var w=画布宽度；
var h=画布高度；
ctx.font=“18px arial”；
var cw=w/2；//中心
var-ch=h/2；
var角=0；
var=false；
var=false；
//处理所有按键输入
const keys={//键输入对象
ArrowLeft:false，//仅添加要侦听的键名
右箭头：错，
关键事件（事件）{
如果（keys[event.code]！==未定义）{//我们对这个键感兴趣吗
keys[event.code]=event.type==“keydown”；
rotated=true；//关闭帮助
}
}
}
//添加关键侦听器
document.addEventListener（“keydown”，keys.keyEvent）
document.addEventListener（“keyup”，keys.keyEvent）
//检查焦点是否单击
canvas.addEventListener（“单击”，（）=>foc