Canvas实现毛玻璃效果解决方式1:使用stackblur.js
在Android系统中实现图片的毛玻璃效果比较好用的类库是:Android StackBlur
简单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: