Jquery中文网 www.jquerycn.cn
Jquery中文网 >  前端编程  >  HTML5教程  >  正文 HTML5 canvas如何实现马赛克的淡入淡出效果(代码)

HTML5 canvas如何实现马赛克的淡入淡出效果(代码)

发布时间:2020-05-11   编辑:www.jquerycn.cn
jquery中文网为您提供HTML5 canvas如何实现马赛克的淡入淡出效果(代码)等资源,欢迎您收藏本站,我们将为您提供最新的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 = 64;
      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="640" 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 = 64;
      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 (64 < 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="640" height="360" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
  <div id="output"></div>
</body>
</html>

说明:

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

运行结果

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

2345截图20181203101217.png

然后逐渐变得清晰,如下

2345截图20181203101520.png

之后,图像显示约两秒钟,然后图像开始出现马赛克效果,如下图所示

2345截图20181203102955.png

然后,马赛克逐渐变粗,最后隐藏,如下所示,页面什么也没有了

2345截图20181203103413.png

以上就是HTML5 canvas如何实现马赛克的淡入淡出效果(代码)的详细内容,更多请关注jquery中文网其它相关文章!

-->
  • 本文原创发布jQuery中文网,转载请注明出处,感谢您的尊重!
  • 您可能感兴趣的文章:
    HTML5 canvas如何实现马赛克的淡入淡出效果(代码)
    如何使用HTML5 canvas实现图像的马赛克
    C# 窗体淡入淡出效果的实现方法与代码
    jquery (show,fadeOut,Animate)简单效果
    jQuery淡入淡出效果代码
    如何使用canvas实现图片马赛克
    html5 canvas如何实现图片切换(代码)
    jQuery 淡入淡出、展开收缩菜单实现代码
    关于canvas下载二维码和图片加水印的方法
    jquery 淡入淡出效果的简单实现

    [关闭]