使用context.putImageData在html画布中放置Dropshadow

在html画布中，我试图在带有透明部分的图像上生成dropshadow。该图像由代码生成，然后使用：

ctx.putImageData（dst，0，0）绘制到画布上

问题是以下代码没有生成任何阴影：

ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 15;
ctx.shadowColor = 'rgba(0,0,0,1)';

ctx.putImageData(dst, 0, 0);

任何帮助都将不胜感激。
将用您放置的图像数据中包含的像素替换您上下文中的像素。

没有上下文的属性（如阴影模糊、过滤器、globalCompositeOperation，甚至矩阵变换）会影响它。即使ImageData中的透明像素在上下文中也是透明的


const ctx=canvas.getContext（'2d'）；
ctx.fillStyle=‘鲑鱼’；
ctx.fillRect（0,0300150）；
ctx.translate（120,50）；
ctx.旋转（数学PI/3）；
ctx.translate（-25，-25）；
ctx.filter='blur（5px）'；
ctx.globalCompositeOperation='lighter'；
ctx.fillStyle='#0000FF'；
ctx.fillRect（0,0,50,50）；
设置超时（（）=>{
//此时，所有以前的过滤器、变换、gCO仍处于活动状态
const bluerect=ctx.createImageData（50,50）；
const data=new uint32数组（bluerect.data.buffer）；
data.fill（0xFFFF0000）；//蓝色
putImageData（bluerect，0，0）；//与前面的fillRect（）相同；
//透明图像数据（较小）
const transrect=ctx.createImageData（25,25）；
putImageData（transrect，170，50）；//再推一点；
}, 1500);
正文{
背景：浅蓝色；
}
将用您放置的图像数据中包含的像素替换上下文中的像素。

没有上下文的属性（如阴影模糊、过滤器、globalCompositeOperation，甚至矩阵变换）会影响它。即使ImageData中的透明像素在上下文中也是透明的


const ctx=canvas.getContext（'2d'）；
ctx.fillStyle=‘鲑鱼’；
ctx.fillRect（0,0300150）；
ctx.translate（120,50）；
ctx.旋转（数学PI/3）；
ctx.translate（-25，-25）；
ctx.filter='blur（5px）'；
ctx.globalCompositeOperation='lighter'；
ctx.fillStyle='#0000FF'；
ctx.fillRect（0,0,50,50）；
设置超时（（）=>{
//此时，所有以前的过滤器、变换、gCO仍处于活动状态
const bluerect=ctx.createImageData（50,50）；
const data=new uint32数组（bluerect.data.buffer）；
data.fill（0xFFFF0000）；//蓝色
putImageData（bluerect，0，0）；//与前面的fillRect（）相同；
//透明图像数据（较小）
const transrect=ctx.createImageData（25,25）；
putImageData（transrect，170，50）；//再推一点；
}, 1500);
正文{
背景：浅蓝色；
}
非常好的answar，我使用了您的第二个代码片段，它工作得非常好！塔克斯！优秀的answar，我使用了你的第二个代码片段，它工作得非常好！塔克斯！