如何使用Javascript模糊画布中的fillRect

我想用Javascript在画布上做类似的事情

我想模糊一个正方形。我在网上找过，但什么也没找到。如果我不必使用外部JS库，它会更好

[EDIT]我指的不是Finder图标，而是它后面的正方形。[/EDIT]

Stackoverflow的Ken Fyrstenberg在这里编写了一个非常好的模糊脚本：

下面是一个使用Ken的模糊加上着色的25%不透明矩形的示例：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/multple/wingedLion.jpg";
函数start（）{
var tempcanvas=document.createElement（“画布”）；
var tctx=tempcanvas.getContext（“2d”）；
cw=canvas.width=tempcanvas.width=img.width；
ch=canvas.height=tempcanvas.height=img.height；
var x=50；
变量y=250；
var w=325；
var h=75；
tctx.drawImage（img，0,0）；
var-rtblur；
rtblur=新的rtblur（{source:tempcanvas}）；
rtblur.blur（0.50，tctx）；
ctx.drawImage（img，0,0）；
ctx.drawImage（tempcanvas，x，y，w，h，x，y，w，h）；
ctx.fillStyle='tan'；
ctx.globalAlpha=0.250；
ctx.fillRect（x，y，w，h）；
ctx.globalAlpha=1.00；
ctx.strokeStyle='darkgray'；
ctx.线宽=2；
ctx.冲程（x，y，w，h）；
ctx.font='18px verdana'；
ctx.fillStyle='white'；
ctx.fillText（“背景模糊的矩形”，x+20，y+30）；
ctx.fillText（'和棕褐色25%不透明度色调'，x+20，y+55）；
}

body{背景色：象牙色；填充：10px；}
画布{边框：1px纯红；}

您指的是哪个框；最左边图标的蓝色左侧？如果有帮助的话，我相信“从一种颜色到另一种颜色的位置转移”通常被称为渐变。这可能有助于你的搜索。或者，你真的是指高斯模糊效果，就像你在Photoshop中得到的那样？你确定你不只是想要一个圆形的正方形吗？图像与您想要的不匹配，它看起来不像一个“模糊”的正方形。不，这是真正的“模糊”。感谢演示我的代码（我知道我需要添加对区域的支持）。对于下一代canvas/2d上下文来说，这也是一个好消息：它将拥有自己的

filter

属性，可以使用css过滤器（包括blur）。不幸的是，直到（可能/希望）今年晚些时候，您才可以在实验/标志下使用。不客气，您已经编写了一个很好的脚本——非常快！区域将是一个有益的补充。虽然我认为如果你想在图像周围设置标题矩形的动画，模糊整个图像是很有用的。对我期待着能够过滤混合以及做基本的合成。干杯我是否可以在不创建另一张画布的情况下模糊画布的一部分？是的，您可以（1）绘制图像，（2）模糊图像，（3）创建排除矩形的剪裁区域，（4）重新绘制未模糊的图像，（5）松开区域，（6）绘制色调和标题。