javascript - 实时更新毛玻璃UI jQuery

我需要一个磨砂玻璃UI效果，这基本上是一个透明的，白色div覆盖一些内容。div下面的部分内容应该是模糊的。效果应该是这样的：
http://codepen.io/Matori/pen/JFzok

random code because StackOverflow forced me to add it

问题是，我没有使用任何背景图像。我的应用程序是一个绘图工具，用户可以在其中绘制形状和文本。因此，磨砂玻璃div覆盖的区域将每秒更新一次。
我试过，但没能成功。不管怎样，够了吗？或者只是在页面加载时截取我的body元素的快照？

最佳答案

有一种方法可以达到效果。
对你的图像应用快速模糊（马里奥·克林格曼的作品），
在25%不透明的白色矩形上覆盖一层“霜”。
模糊脚本在这里：http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
示例代码和演示：http://jsfiddle.net/m1erickson/PA9NC/

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var img = new Image();
    img.crossOrigin = "anonymous";
    img.onload = start;
    img.src = "https://dl.dropboxusercontent.com/u/139992952/multple/Dog-With-Cute-Cat.jpg";

    function start() {
        canvas.width = img.width;
        canvas.height = img.height;

        // draw the image

        ctx.drawImage(img, 0, 0);

        // blur the image with blur radius=10

        stackBlurCanvasRGB("canvas", 0, img.height/2+30, img.width, img.height / 2, 10);

        // draw a white rectangle at 25% opacity

        ctx.globalAlpha = 0.25;
        ctx.fillStyle = "white";
        ctx.fillRect(0, img.height/2+30, img.width, img.height / 2);

        // draw some text at 40% opacity

        ctx.globalAlpha = 0.40;
        ctx.font = "102px arial";
        ctx.fillText("Us", 225, 275);
    }

关于javascript - 实时更新毛玻璃UI jQuery，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24977996/