Canvas实现毛玻璃效果解决方式1：使用stackblur.js
在Android系统中实现图片的毛玻璃效果比较好用的类库是：Android StackBlur
官方Git地址：
在前端Canvas中可以使用StackBlur.js:
Git地址：简单API说明：
API 调用
下面是针对不同的源（图片或者 Canvas 等）进行 StackBlur 的调用。
图像作为源:
StackBlur.image(sourceImage, targetCanvas, radius, blurAlphaChannel);
- sourceImage：HTMLImageElement或者它的id
- targetCanvas：HTMLCanvasElement或者它的id
- radius：模糊半径
- blurAlphaChannel： 如果你想模糊一个 RGBA 的图像，就将其设置为true（可选，默认 =false）
RGBA Canvas 作为源:
StackBlur.canvasRGBA(targetCanvas, top_x, top_y, width, height, radius);
- targetCanvas:HTMLCanvasElement
- top_x: 要模糊的矩形的左上角的水平坐标
- top_y: 要模糊的矩形的左上角的垂直坐标
- width: 要模糊的矩形宽度
- height: 要模糊的矩形高度
- radius: 模糊半径
RGB Canvas 作为源:
StackBlur.canvasRGB(targetCanvas, top_x, top_y, width, height, radius);
- targetCanvas:HTMLCanvasElement
- top_x: 要模糊的矩形的左上角的水平坐标
- top_y: 要模糊的矩形的左上角的垂直坐标
- width: 要模糊的矩形宽度
- height:要模糊的矩形高度
- radius: 模糊半径
RGBA ImageData 作为源:
StackBlur.imageDataRGBA(imageData, top_x, top_y, width, height, radius);
- imageData: canvas 的ImageData
- top_x：要模糊的矩形的左上角的水平坐标
- top_y: 要模糊的矩形的左上角的垂直坐标
- width: 要模糊的矩形宽度
- height: 要模糊的矩形高度
- radius: 模糊半径
RGB ImageData 作为源:
StackBlur.imageDataRGB(imageData, top_x, top_y, width, height, radius);
- imageData: canvas 的ImageData
- top_x：要模糊的矩形的左上角的水平坐标
- top_y: 要模糊的矩形的左上角的垂直坐标
- width: 要模糊的矩形宽度
- height: 要模糊的矩形高度
- radius: 模糊半径
实例1：
实例2：相对完整点
1.添加引用
2.HTM和js
