在显示马赛克图像时，淡入动画是逐渐从很模糊到很清晰马赛克的过程，淡出动画的处理是从图像变得清晰后又慢慢变得模糊的过程，下面我们就来看看具体的内容。
我们先来看看马赛克图像的淡入效果
代码如下
说明：
由于body标签的onload事件，在页面显示时会通过调用loadImagen（）函数开始处理。
立即学习“前端免费学习笔记（深入）”；
页面显示后创建内部绘制的Canves对象，并读取图像。获得绘制后的像素数据。之后，启动计时器处理，在计时器的事件中创建马赛克图像并将其绘制到画面上。在执行计时器处理时，会减少马赛克的大小（fadeMosaicSize），从很粗的马赛克开始变得很清晰的马赛克动画，以表示淡入效果。
要调整渐变速度，可以更改计时器的间隔，
fadeMosaicSize = Math.floor(fadeMosaicSize / 1.5);
运行结果：
显示上面的HTML文件。显示很深的马赛克图像。
这是一个动态的过程，图像会慢慢的变清晰，最后就会出现如下效果
看完了淡入的效果，接下来我们来看看马赛克图像淡入淡出的效果实现
代码如下
说明：
在处理完前一个代码之后，它执行2秒的间隔，然后在该间隔中执行onFadeOut，是淡出之前执行的代码。
运行结果
执行上面的HTML文件，将显示如下马赛克效果
然后逐渐变得清晰，如下
之后，图像显示约两秒钟，然后图像开始出现马赛克效果，如下图所示
然后，马赛克逐渐变粗，最后隐藏，如下所示，页面什么也没有了
