如何在 canvas 中实现反向径向倾斜偏移效果
How to implement a reversed radial tilt shift effect in canvas
我在创造什么
我正在创建一个 JavaScript 图像处理应用程序（使用 Fabric.js & HTML5 canvas）到 build/re-render canvas 和place/drag 个物体放在上面。放置对象后，它可以导出数据 url 并处理图像。
我想添加的功能
我正在尝试实现反向径向倾斜偏移效果，因此图片中的某些点可能 "blurred out"。通过 Fabric.js 或简单的 HTML5 canvas 实现此目标的最快方法是什么？
这是我想要实现的示例
我试过的
添加圆形并尝试添加 Blur/Convolute 效果
它然后降低不透明度=>这对我来说不起作用，我
只能更改不透明度属性。
添加图像（来自 URL）并尝试与第一个相同的操作
观点。 => 这对我来说不起作用，我只能添加一个
Blur/Convolute过滤但不改变不透明度。
也许我可以稍后完成这个演示。
如你所见，我将你的图片作为背景。
然后我将相同的图像加载到我用来创建圆圈图案的图像元素中。
现在，当圆圈移动时，我会移动图案偏移量，这样看起来图像与背景相同，但您正在看图案。
现在想象一下使用 stackblur 或 fabricjs 滤镜来模糊图案图像（仅一次），您应该会得到想要的效果。
需要一些技巧来补偿缩放效果。
稍后我会完成演示。
希望对你有所帮助。
编辑：我这里有严重的 cors 问题。
我不知道如何制作非本地图片的片段。
这里是一个使用 fabricjs 制作的工作演示：
http://www.deltalink.it/andreab/fabric/blur.html
我在创造什么
我正在创建一个 JavaScript 图像处理应用程序（使用 Fabric.js & HTML5 canvas）到 build/re-render canvas 和place/drag 个物体放在上面。放置对象后，它可以导出数据 url 并处理图像。
我想添加的功能
我正在尝试实现反向径向倾斜偏移效果，因此图片中的某些点可能 "blurred out"。通过 Fabric.js 或简单的 HTML5 canvas 实现此目标的最快方法是什么？
这是我想要实现的示例
我试过的
添加圆形并尝试添加 Blur/Convolute 效果 它然后降低不透明度=>这对我来说不起作用，我 只能更改不透明度属性。
添加图像（来自 URL）并尝试与第一个相同的操作 观点。 => 这对我来说不起作用，我只能添加一个 Blur/Convolute过滤但不改变不透明度。
也许我可以稍后完成这个演示。
如你所见，我将你的图片作为背景。 然后我将相同的图像加载到我用来创建圆圈图案的图像元素中。 现在，当圆圈移动时，我会移动图案偏移量，这样看起来图像与背景相同，但您正在看图案。
现在想象一下使用 stackblur 或 fabricjs 滤镜来模糊图案图像（仅一次），您应该会得到想要的效果。
需要一些技巧来补偿缩放效果。
稍后我会完成演示。 希望对你有所帮助。
编辑：我这里有严重的 cors 问题。 我不知道如何制作非本地图片的片段。
这里是一个使用 fabricjs 制作的工作演示： http://www.deltalink.it/andreab/fabric/blur.html