jquery - 我们可以将 SVG 过滤器应用于 Canvas 元素的特定部分吗？

Question

我正在研究 SVG 和滤镜，然后我有了这样的想法:我们可以将滤镜应用到元素的特定部分吗？

准确地说，请看:My home page

这些正方形被绘制在页面两侧的两个 Canvas 上。现在，正如您所看到的，主要内容下方有几个方 block 。我希望它们模糊一点，这样看起来更好。

我的想法:仅将 SVG 模糊滤镜应用于 Canvas 上直接位于主要内容下方的部分。

感谢任何帮助!

Answer 1

2D 上下文过滤器 属性

您可以通过 2D 上下文过滤器属性将一些标准过滤器应用到 Canvas 。

ctx.filter = "模糊(5px)"

过滤器应用于新呈现的内容，而不是现有内容。

ctx.fillRect(10,10,20,10); // not blurred

ctx.filter = "blur (5px)";
ctx.fillRect(10,30,20,10); //blurred but first rect remains unblurred

有一些内置过滤器。这些单位就像 CSS 一样，必须进行后期修复。长度“px”，百分比“%”，度数“deg”

您还可以通过 url 使用 SVG 过滤器。我从未尝试过使用该方法，但假设我将涵盖所有可用的 SVG 过滤器。

当我第一次使用过滤器属性时，速度非常慢。但现在我在动画中使用它们，因为性能越来越好。但请务必小心，因为它们尚未达到 CSS 和 SVG 性能，通常是由于渲染管理技术的原因。

Canvas 过滤器方法列表。

"url(url)" // url points to XML file containing SVG filter,
           // can be to anchor in SVG  to filter element.
"blur(length)"
"brightness(percentage)"
"contrast(percentage)"
"drop-shadow(offsetX, offsetY, blurRadius, color)"
"grayscale(percentage)"
'hue-rotate(degree)"
"invert(percentage)"
"opacity(percentage)"
"saturate(percentage)"
"sepia(percentage)"

*注意； filter 是实验性的，请参阅 MDN 2D context filter

重新SVG过滤器url()函数。摘自 MDN 2017 年 9 月 15 日

• url(). The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specificfilter element.

另请参阅HTML Living Standard 4.12.5.1.19 Filters 2017 年 10 月 3 日