HTML5 Canvas 运动模糊效果？

Posted 2023-02-18

【中文标题】HTML5 Canvas 运动模糊效果？

【英文标题】：HTML5 Canvas Motion Blur effect?

【发布时间】：2012-09-01 17:23:24

【问题描述】：

我正在尝试使用 html5 画布制作类似运动模糊效果的东西，但没有成功。

基本上我想做的是拍一张照片，让它看起来像“快进”，就像你拍照并且人移动一样。

【问题讨论】：

这个问题不是针对画布的。您正在寻找的是一种创建运动模糊效果的像素操作算法。

可能重复：***.com/questions/9638763/…

【参考方案1】：

有几个画布库已经实现了各种模糊算法。 EaselJS 已经独立实现了 x 轴和 y 轴模糊，你可以看到in this sample.

您可能想要的只是他们库中的 x 轴模糊。

【参考方案2】：

我遇到了相反的问题。缩放图像时，我试图消除模糊。幸运的是，我的问题为您的问题提供了一个简单的解决方案。此外，繁重的工作由 API 执行，因此效率很高。

如果您将图像绘制到分辨率较小的画布上，然后将其放大，您会得到模糊的图像。我已经在许多浏览器中尝试过这个，它似乎工作得差不多。 This question 探讨了如果您担心这种技术在不同浏览器和未来版本中的一致性，浏览器何时以及为什么会使用这种模糊行为。

canvas.drawImage 的图像参数接受另一个画布。当您将图像绘制到中间画布上时，您可以尝试沿一个轴使用小分辨率。然后，将其缩放回原始大小，模糊效果应主要沿一个轴。

我不是图像专家，所以我不知道如何以最佳方式使用运动模糊（是否应该沿着一个轴等），但是通过一些摆弄和研究，您也许可以使用这种技术来获得你想要的效果。

希望对你有帮助