画布模糊 div 元素答案

【问题标题】：Canvas blur div element画布模糊 div 元素
【发布时间】：2015-12-30 16:55:39
【问题描述】：

是否可以使用画布创建模糊 div？在互联网上我只找到了一个图像，但我正在寻找一个没有图像的代码。

<div class="element_one" id="blur_this"></div>

【问题讨论】：

你可以 fetch all the div's html elements and try to draw them on the canvas 但这对于复杂的 CSS 会产生问题。您还可以查看在this prior Stackoverflow Q&A 中链接的this CSS blur tutorial。

标签： html image canvas

【解决方案1】：

jsFiddle：https://jsfiddle.net/CanvasCode/zk7313dz/

css

.wrapper {
  border: 1px solid black;
  width: 400px;
  height= 400px;
}

.blur{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  width: 400px;
  height= 400px;
}

只需使用 CSS 已有的内置blur :)

【讨论】：

IE & Edge 还不支持filter（Android 最近才支持它），所以当您提出不完全跨浏览器兼容的解决方案时，请务必警告观众。 ;-)
我不知道@markE，但确实理解你觉得/认为你有一个更好的答案，而不是让这个用户四处寻找答案，请继续提供一个。我只是想本着善良的精神帮助别人
使用filter 是一个很好的答案。 :-) 但是，在提出使用新兴浏览器功能的解决方案时，请确保您“注意”——仅此而已。
可以不用css模糊滤镜，只用canvas吗？