HTML5canvas如何实现马赛克的淡入淡出效果（代码）

来源：动视网责编：小采时间：2020-11-27 15:04:01

HTML5canvas如何实现马赛克的淡入淡出效果（代码）

HTML5canvas如何实现马赛克的淡入淡出效果（代码）:在显示马赛克图像时，淡入动画是逐渐从很模糊到很清晰马赛克的过程，淡出动画的处理是从图像变得清晰后又慢慢变得模糊的过程，下面我们就来看看具体的内容。我们先来看看马赛克图像的淡入效果代码如下<!DOCTYPE html> <html> <h

推荐度：

点击下载本文 文档为doc格式

导读HTML5canvas如何实现马赛克的淡入淡出效果（代码）:在显示马赛克图像时，淡入动画是逐渐从很模糊到很清晰马赛克的过程，淡出动画的处理是从图像变得清晰后又慢慢变得模糊的过程，下面我们就来看看具体的内容。我们先来看看马赛克图像的淡入效果代码如下<!DOCTYPE html> <html> <h

在显示马赛克图像时，淡入动画是逐渐从很模糊到很清晰马赛克的过程，淡出动画的处理是从图像变得清晰后又慢慢变得模糊的过程，下面我们就来看看具体的内容。

HTML5 canvas

我们先来看看马赛克图像的淡入效果

代码如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title></title>
 <meta charset="utf-8" />
 <script type="text/javascript">
 var imageData;
 var fadeMosaicSize = 0;
 var THandle;
 var mem_canvas;
 var mem_context;
 var context;
 var img;
 function loadImage() {
 img = new Image();
 mem_canvas = document.createElement('canvas');
 img.onload = function onImageLoad() {
 mem_canvas.width = img.width;
 mem_canvas.height = img.height;
 mem_context = mem_canvas.getContext('2d');
 mem_context.drawImage(img, 0, 0);
 imageData = mem_context.getImageData(0, 0, mem_canvas.width, mem_canvas.height);
 startFadeIn();
 }
 img.src = 'img/luffy.jpg';
 var canvas = document.getElementById('SimpleCanvas');
 if (!canvas || !canvas.getContext) {
 return false;
 }else{
 context = canvas.getContext('2d');
 }
 }
 function startFadeIn() {
 fadeMosaicSize = ;
 THandle = setInterval(onFadeIn, 50);
 }
 function onFadeIn() {
 if (fadeMosaicSize <= 1) {
 clearInterval(THandle);
 context.drawImage(img, 32, 32);
 } else {
 CreateMosaic(mem_context, mem_canvas.width, mem_canvas.height, fadeMosaicSize);
 context.drawImage(mem_canvas, 32, 32);
 fadeMosaicSize = Math.floor(fadeMosaicSize / 1.5);
 }
 }
 function CreateMosaic(context, width,height,mosaicSize) {
 var x=0;
 var y=0;
 for (y = 0; y < height; y = y + mosaicSize) {
 for (x = 0; x < width; x = x + mosaicSize) {
 var cR = imageData.data[(y * width + x) * 4];
 var cG = imageData.data[(y * width + x) * 4 + 1];
 var cB = imageData.data[(y * width + x) * 4 + 2];
 context.fillStyle = "rgb("+cR+","+cG+","+cB+")";
 context.fillRect(x, y, x + mosaicSize, y + mosaicSize);
 }
 }
 }
 </script>
</head>
<body onload="loadImage();" style="background-color:#D0D0D0;">
 <canvas id="SimpleCanvas" width="0" height="360" style="background-color:#FFFFFF;"></canvas>
 <div>Canvas Demo</div>
 <div id="output"></div>
</body>
</html>

说明：

由于body标签的onload事件，在页面显示时会通过调用loadImagen（）函数开始处理。

页面显示后创建内部绘制的Canves对象，并读取图像。获得绘制后的像素数据。之后，启动计时器处理，在计时器的事件中创建马赛克图像并将其绘制到画面上。在执行计时器处理时，会减少马赛克的大小（fadeMosaicSize），从很粗的马赛克开始变得很清晰的马赛克动画，以表示淡入效果。

要调整渐变速度，可以更改计时器的间隔，

fadeMosaicSize = Math.floor(fadeMosaicSize / 1.5);

运行结果：

显示上面的HTML文件。显示很深的马赛克图像。

HTML5 canvas

这是一个动态的过程，图像会慢慢的变清晰，最后就会出现如下效果

HTML5 canvas

看完了淡入的效果，接下来我们来看看马赛克图像淡入淡出的效果实现

代码如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title></title>
 <meta charset="utf-8" />
 <script type="text/javascript">
 var imageData;
 var fadeMosaicSize = 0;
 var THandle;
 var mem_canvas;
 var mem_context;
 var context;
 var img;
 function loadImage() {
 img = new Image();
 mem_canvas = document.createElement('canvas');

 img.onload = function onImageLoad() {
 mem_canvas.width = img.width;
 mem_canvas.height = img.height;
 mem_context = mem_canvas.getContext('2d');
 mem_context.drawImage(img, 0, 0);
 imageData = mem_context.getImageData(0, 0, mem_canvas.width, mem_canvas.height);
 startFadeIn();
 }
 img.src = 'img/luffy.jpg';
 var canvas = document.getElementById('SimpleCanvas');
 if (!canvas || !canvas.getContext) {
 return false;
 }else{
 context = canvas.getContext('2d');
 }
 }
 function startFadeIn() {
 fadeMosaicSize = ;
 THandle = setInterval(onFadeIn, 50);
 }
 function startFadeOut() {
 fadeMosaicSize = 1;
 THandle = setInterval(onFadeOut, 50);
 }
 function onFadeIn() {
 if (fadeMosaicSize <= 1) {
 clearInterval(THandle);
 context.drawImage(img, 32, 32);
 THandle = setInterval(onShow, 2000);
 } else {
 CreateMosaic(mem_context, mem_canvas.width, mem_canvas.height, fadeMosaicSize);
 context.drawImage(mem_canvas, 32, 32);
 fadeMosaicSize = Math.floor(fadeMosaicSize / 1.5);
 }
 }
 function onShow() {
 clearInterval(THandle);
 startFadeOut();
 }
 function onFadeOut() {
 if ( < fadeMosaicSize) {
 clearInterval(THandle);

 context.fillStyle = "#FFFFFF";
 context.fillRect(32, 32, mem_canvas.width, mem_canvas.height);
 } else {
 CreateMosaic(mem_context, mem_canvas.width, mem_canvas.height, fadeMosaicSize);
 context.drawImage(mem_canvas, 32, 32);
 fadeMosaicSize = Math.ceil(fadeMosaicSize * 1.5);
 }
 }
 function CreateMosaic(context, width,height,mosaicSize) {
 var x=0;
 var y=0;
 for (y = 0; y < height; y = y + mosaicSize) {
 for (x = 0; x < width; x = x + mosaicSize) {
 var cR = imageData.data[(y * width + x) * 4];
 var cG = imageData.data[(y * width + x) * 4 + 1];
 var cB = imageData.data[(y * width + x) * 4 + 2];
 context.fillStyle = "rgb("+cR+","+cG+","+cB+")";
 context.fillRect(x, y, x + mosaicSize, y + mosaicSize);
 }
 }
 }
 </script>
</head>
<body onload="loadImage();" style="background-color:#D0D0D0;">
 <canvas id="SimpleCanvas" width="0" height="360" style="background-color:#FFFFFF;"></canvas>
 <div>Canvas Demo</div>
 <div id="output"></div>
</body>
</html>

说明：

在处理完前一个代码之后，它执行2秒的间隔，然后在该间隔中执行onFadeOut，是淡出之前执行的代码。

运行结果

执行上面的HTML文件，将显示如下马赛克效果