如何使用画布和javascript创建运动模糊效果？

我有一个虚拟画布，上面画着一个图标。这个图标是动态的，所以我不能在Photoshop中制作这个图标的运动模糊变体。我通过以下代码在场景中渲染此图标：

function render (context) {
    context.drawImage(this.bufferedIcon, 0, 0);
}

---

您能告诉我是否有一种简单的方法来创建此图标的运动模糊吗？

要进行简单的运动模糊，请使用globalAlpha

var ctx=document.getElementById（“can”）.getContext（“2d”）；
//dx和dy是模糊的方向和速度
函数drawblued（x，y，dx，dy）{//x，y当前位置，dx，dy delta x，y
var samples=10；//样本数。样本数越大
//效果更好，但渲染速度越慢
//超过100个样品和颜色的动态范围
//会让它看起来很糟糕
dx/=samples；//将速度除以采样数
dy/=样品；
ctx.globalAlpha=1/（samples/1.2）；//设置需要的全局alpha值以提高
//val一点，否则天就黑了
对于（var i=0；i
.canC{
宽度：400px；
高度：400px；
}
使用覆盖元素并降低其不透明度如何？你只需要创建一些元素，当不透明度改变时，它会使它看起来像是模糊的。我认为这不会有帮助。我必须得到一个动态模糊的图标。因为我必须模仿图标移动得非常快。我也找到了高斯模糊的算法，但我找不到一个简单的运动模糊算法。（你能展示一下你对高斯模糊的看法吗？以及一些供我们实验的小提琴吗？当然！但我现在不能做。我会准备一个很好的例子，明天发布在这里。回答很好！非常感谢！投票给好的答案。我宁愿将requestAnimationFrame视为循环。在第r帧添加运动模糊有问题如果每秒30帧以上，你就看不到效果，20帧是故意的，这样可以看到模糊。