Javascript 显示具有阴影效果的底部画布-剪裁区域内的阴影

我是画布新手，谢谢你的耐心

我编写了一个引擎，它在两个画布元素中创建了两个不同的层，这些元素彼此重叠。它们包含一些生成的图片，这些图片在这里并不重要。

我正在尝试创建一种效果，当我将鼠标移到顶层并单击时，它将显示底层

类似这样的内容：

这就是我迄今为止所尝试的：

在画布元素上使用透明度并显示底部画布（快速但不可用）

重新创建剪辑区域。
无论何时按下鼠标，我都会存储当前坐标，并使用更新的剪裁区域重新渲染画布

如果我使用笔划创建阴影，更新剪辑区域的速度会很慢，而且我不确定如何从中删除线条（见图）。

若我移除阴影效果，效果会很快，但我需要它

我脑子里唯一想到的是如何加快速度，就是保存每次点击的坐标，然后重新计算成一个形状并在上面投下阴影-我仍然有线条，但速度会更快，因为不会有上千个圆圈要画

---

任何帮助都将不胜感激

您可以利用浏览器内置的插值功能，将其用作伪低通滤波器，但首先要将其涂成黑色：

• 将顶层复制到底层
• 在comp中设置源。模式
• 画龙点睛
• 在comp中设置源。模式
• 将图像缩小到25%
• 将25%区域缩放回原始区域的50%（或当前区域的两倍）
• 将现在50%的区域缩放回原始区域的100%。它将变得模糊

根据需要的模糊程度，可以添加其他步骤。这就是说：模糊阴影是一个密集的操作，无论它是如何扭曲和扭转。例如，可以折衷地只渲染鼠标上的阴影（如下面的演示）

例子 使用两层的示例。顶层可以让你画任何东西，底层会在以后画图时在底部显示阴影版本

var ctx=document.getElementById（“top”）.getContext（“2d”），
bctx=document.getElementById（“底部”）.getContext（“2d”），
bg=新图像（），
isDown=假；
bg.src=”http://i.imgur.com/R2naCpK.png";
ctx.fillStyle=“#27f”；
ctx.fillRect（0，0，ctx.canvas.width，ctx.canvas.height）；
ctx.globalCompositeOperation=“目的地输出”//“橡皮擦”
ctx.canvas.onmousedown=函数（e）{isDown=true}；
window.onmousemove=函数（e）{
如果（！isDown）返回；
var pos=getPos（ctx.canvas，e）；
ctx.beginPath（）；
ctx移动到（位置x+10，位置y）；
ctx.arc（pos.x，pos.y，10,0,2*Math.PI）；//绘图时擦除
ctx.fill（）；
};
window.onmouseup=函数（e）{
如果（isDown）{
isDown=假；
makeShadow（）；
}
};
函数makeShadow（）{
var w=bctx.canvas.width，
h=bctx.canvas.height，
偏移量=7，
α=0.75；
//重置阿尔法
bctx.globalAlpha=1；
//正常补偿模式清除，因为它比使用“复制”更快
bctx.globalCompositeOperation=“源代码结束”；
bctx.clearRect（0，0，w，h）；
//将顶层复制到底层
bctx.drawImage（ctx.canvas，0,0）；
//补偿模式下一步将只引入非alpha像素
bctx.globalCompositeOperation=“来源于”；
//黑色覆盖层
bctx.fillRect（0,0,w,h）；
//复制模式，所以我们不需要额外的画布
bctx.globalCompositeOperation=“复制”；
//步骤1：减少到50%（质量相关-创建更多步骤以增加模糊/质量）
bctx.drawImage（bctx.canvas，0，0，w，h，0，0，w*0.5，h*0.5）；
bctx.drawImage（bctx.canvas，0,0，w*0.5，h*0.5,0,0，w*0.25，h*0.25）；
bctx.drawImage（bctx.canvas，0，0，w*0.25，h*0.25，0，0，w*0.5，h*0.5）；
//阴影透明度
bctx.globalAlpha=α；
//第2步：绘制回100%，绘制偏移
bctx.drawImage（bctx.canvas，0,0，w*0.5，h*0.5，偏移量，偏移量，w，h）；
//背景图像中的comp
bctx.globalCompositeOperation=“目的地结束”；
bctx.drawImage（bg，0，0，w，h）；
}
函数getPos（画布，e）{
var r=canvas.getBoundingClientRect（）；
返回{x:e.clientX-r.left，y:e.clientY-r.top}；
}

div{位置：相对；边框：1px实心#000；宽度：500px；高度：500px}
画布{位置：绝对；左侧：0；顶部：0}
#底部{背景：#eee}

Omg，这看起来太棒了！我以后需要检查一下，不过谢谢你！Upvote可获得酷炫的效果和出色的合成应用。顺便说一句，如果你做了如下操作，你的演示会更酷：

#bottom{background image:url（'someCoolBackground.png'）；}

而不是#eee.：-）只是想让你知道这帮了大忙。我在两层都有照片，所以我必须为阴影创建第三层。我将底层复制到新的一层，并在其上运行您的效果。你认为只有两个就可以做到吗？@GoranUsljebrka没问题！是的，像往常一样绘制阴影，然后将底层的comp模式更改为destination over，然后在中绘制底部图像（记住切换回source over）。（更新答案）我看到你用背景图片更新了一个演示。在我的例子中，我有一个生成的帧（它不仅是一张图片，而且是唯一的帧），这需要创建一些资源，所以我认为（我还没有测试它）将它复制到另一个帧，然后重新创建它“更便宜”。。。我真的需要（在某个时候）对这一切进行详细测试，但现在我m很高兴它能正常工作。：-）