Javascript 使用画布，如何将带有插入阴影的孔剪切到图像中？
使用Javascript 使用画布，如何将带有插入阴影的孔剪切到图像中？,javascript,canvas,shadow,Javascript,Canvas,Shadow,使用canvas，我试图在图像上切割一系列圆孔。此外，每个孔都应该有一个嵌入阴影，使其看起来像是图像稍微悬停在背景上 以下是我设法做到的： 使用globalCompositeOperation=“destination top” 使用“反向缠绕”从背景形状上切下一个孔（先逆时针绘制，然后顺时针绘制） 但是，第二次尝试似乎不适用于图像上的多个孔，原因有两个： 对不起，不能逆时针画图像 好了，为了工作，我不能关闭调用arc 以下是我目前拥有的： let cvs=document.querySe
canvasglobalCompositeOperation=“destination top”- 对不起，不能逆时针画图像
- 好了，为了工作，我不能关闭调用
arc
let cvs=document.querySelector（“canvas”）；
设ctx=cvs.getContext（“2d”）；
设img=新图像（）；
img.addEventListener（“加载”，函数（）{
ctx.drawImage（img，0，0，256，256）；
ctx.globalCompositeOperation=“目的地输出”；
孔（ctx，64，64，32）；
孔（ctx，192，64，32）；
孔（ctx，64，192，32）；
孔（ctx，192，192，32）；
});
img.src=”https://placeimg.com/256/256/nature";
功能孔（ctx、x、y、r、ccw=假）{
ctx.beginPath（）；
弧（x，y，r，0，数学π*2，逆时针）；
ctx.closePath（）；
ctx.fill（）；
}let cvs=document.querySelector（“canvas”）；
设ctx=cvs.getContext（“2d”）；
设img=新图像（）；
img.addEventListener（“加载”，函数（）{
ctx.drawImage（img，0，0，256，256）；
ctx.globalCompositeOperation=“目的地输出”；
孔（ctx，64，64，32）；
孔（ctx，192，64，32）；
孔（ctx，64，192，32）；
孔（ctx，192，192，32）；
});
img.src=”https://placeimg.com/256/256/nature";
功能孔（ctx、x、y、r、ccw=假）{
ctx.beginPath（）；
弧（x，y，r，0，数学π*2，逆时针）；
ctx.closePath（）；
ctx.fill（）；
}*{
填充：0；
保证金：0；
框大小：边框框；
}
.影子{
位置：绝对位置；
盒影：0px 20px 10px灰色镶嵌；
宽度：70px；
高度：70像素；
边框样式：实心；
边界半径：50%；
边框颜色：透明；
明确：两者皆有；
}
div.shadow：第n个类型（1）{
顶部：29px；
左：29px；
}
div.shadow：第n个类型（2）{
顶部：157px；
左：29px；
}
阴影分区：第n个类型（3）{
顶部：29px；
左：157px；
}
阴影分区：第n个类型（4）{
顶部：157px；
左：157px；
}你可以在每个洞后面放一个div，然后在这些洞里玩嵌入阴影来获得合适的效果（尽管这个片段中的简单阴影使它看起来更像是一个突出的按钮，而不是我意识到的一个洞）
let cvs=document.querySelector（“canvas”）；
设ctx=cvs.getContext（“2d”）；
设img=新图像（）；
img.addEventListener（“加载”，函数（）{
ctx.drawImage（img，0，0，256，256）；
ctx.globalCompositeOperation=“目的地输出”；
孔（ctx，64，64，32）；
孔（ctx，192，64，32）；
孔（ctx，64，192，32）；
孔（ctx，192，192，32）；
});
img.src=”https://placeimg.com/256/256/nature";
功能孔（ctx、x、y、r、ccw=假）{
ctx.beginPath（）；
弧（x，y，r，0，数学π*2，逆时针）；
ctx.closePath（）；
ctx.fill（）；
}*{
填充：0；
保证金：0；
框大小：边框框；
}
.影子{
位置：绝对位置；
盒影：0px 20px 10px灰色镶嵌；
宽度：70px；
高度：70像素；
边框样式：实心；
边界半径：50%；
边框颜色：透明；
明确：两者皆有；
}
div.shadow：第n个类型（1）{
顶部：29px；
左：29px；
}
div.shadow：第n个类型（2）{
顶部：157px；
左：29px；
}
阴影分区：第n个类型（3）{
顶部：29px；
左：157px；
}
阴影分区：第n个类型（4）{
顶部：157px；
左：157px；
}我建议您使用第二块画布，与shadowOffset和shadowColor一起帮助创建您想要的效果
let cvs=document.querySelector（“canvas”）；
设ctx=cvs.getContext（“2d”）；
设img=新图像（）；
img.addEventListener（“加载”，函数（）{
让cvs2=document.createElement（'canvas'）；
cvs2.width=256；
cvs2.height=256；
ctx2=cvs2.getContext（“2d”）；
孔（ctx2、64、64、32）；
孔（ctx2、192、64、32）；
孔（ctx2、64、192、32）；
孔（ctx2、192、192、32）；
ctx2.globalCompositeOperation=“源输出”；
ctx2.drawImage（img，0，0，256，256）；
ctx.shadowOffsetX=4；
ctx.shadowOffsetY=4；
ctx.shadowBlur=8；
ctx.shadowColor='黑色'；
ctx.drawImage（cvs2，0，0，256，256）；
});
img.src=”https://placeimg.com/256/256/nature";
功能孔（ctx、x、y、r、ccw=假）{
ctx.beginPath（）；
弧（x，y，r，0，数学π*2，逆时针）；
ctx.closePath（）；
ctx.fill（）；
}let cvs=document.querySelector（“canvas”）；
设ctx=cvs.getContext（“2d”）；
设img=新图像（）；
img.addEventListener（“加载”，函数（）{
让cvs2=document.createElement（'canvas'）；
cvs2.width=256；
cvs2.height=256；
ctx2=cvs2.getContext（“2d”）；
孔（ctx2、64、64、32）；
孔（ctx2、192、64、32）；
孔（ctx2、64、192、32）；
孔（ctx2、192、192、32）；
ctx2.globalCompositeOperation=“源输出”；
ctx2.drawImage（img，0，0，256，256）；
ctx.shadowOffsetX=4；
ctx.shadowOffsetY=4；
ctx.shadowBlur=8；
ctx.shadowColor='黑色'；
ctx.drawImage（cvs2，0，0，256，256）；
});
img.src=”https://placeimg.com/256/256/nature";
功能孔（ctx、x、y、r、ccw=假）{
ctx.beginPath（）；
弧（x，y，r，0，数学π*2，逆时针）；
ctx.closePath（）；
ctx.fill（）；
}