Javascript 设置alpha而不影响阴影？

我有个问题，阴影受到阿尔法的影响

如何设置alpha而不影响阴影

我试图在绘制矩形后重置alpha，但没有用

var ctx=document.getElementsByTagName（“画布”）[0].getContext（“2d”）；
ctx.shadowColor=“#F08”
ctx.shadowBlur=10；
ctx.globalAlpha=0.3；
ctx.rect（10,10,60,60）；
ctx.stroke（）；
ctx.globalAlpha=1
如果绘制填充形状，请使用
strokeStyle
属性或
fillStyle
。例如：


var ctx=document.getElementsByTagName（“画布”）[0].getContext（“2d”）；
var偏移=1000；
ctx.save（）；
平移（-offset，0）；
ctx.shadowOffsetX=偏移量；
ctx.shadowColor=“#F08”；
ctx.shadowBlur=10；
ctx.rect（10,10,60,60）；
ctx.stroke（）；
ctx.restore（）；
ctx.strokeStyle=“rgba（0,0,0,0.3）”；
ctx.rect（10,10,60,60）；
ctx.stroke（）
要执行此操作，您需要在3遍中绘制形状：

在alpha 1处绘制阴影和笔划
使用GlobalComposite操作模式擦除笔划
重新绘制你的低阿尔法笔划
但是为了使步骤2正确工作，我们必须考虑x-lineWidth和x+lineWidth之间的笔划重叠，从而创建线宽设置为1的抗锯齿。为了解决这个问题，我们可以将整个上下文在两个轴上平移0.5px


var ctx=document.getElementsByTagName（“画布”）[0].getContext（“2d”）；
draw（）；
异步函数draw（）{
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
如果（服务员。已检查）等待等待（500）；
//我们需要平移0.5以使笔划不被抗锯齿
ctx.setTransform（1,0,0,1,0.5,0.5）；
//带阴影的第一次传球
ctx.shadowColor=“#F08”
ctx.shadowBlur=10；
ctx.rect（10,10,60,60）；
ctx.stroke（）；
如果（服务员.勾选）等待等待（1000）；
//第二次传球以清除击球
ctx.globalCompositeOperation='destination out'；
ctx.shadowColor=“rgba（0,0,0,0）”；//删除阴影
ctx.shadowBlur=0；
ctx.stroke（）；
如果（服务员.勾选）等待等待（1000）；
//第三遍画低阿尔法笔划
ctx.globalCompositeOperation='source over'；
ctx.globalAlpha=0.1；
ctx.stroke（）；
//重置为默认值
ctx.globalAlpha=1；
setTransform（1,0,0,1,0,0）；
}
函数等待（t）{
返回新承诺（r=>setTimeout（r，t））；
}
watter.onchange=draw
在绘制步骤之间等待
使用“rgba”也会影响阴影：（我编辑了一点，这是你想要的吗？如果是这样，我会解释，.聪明的黑客只获得阴影；-）但是偏移量应该是一个更具动态性的方法。