HTML5 canvas如何实现马赛克的淡入淡出效果（代码）-H5教程-PHP中文网

首页

web前端

H5教程

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

不言

Dec 03, 2018 am 10:42 AM

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

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(&#39;canvas&#39;);
      img.onload = function onImageLoad() {
        mem_canvas.width = img.width;
        mem_canvas.height = img.height;
        mem_context = mem_canvas.getContext(&#39;2d&#39;);
        mem_context.drawImage(img, 0, 0);
        imageData = mem_context.getImageData(0, 0, mem_canvas.width, mem_canvas.height);
        startFadeIn();
      }
      img.src = &#39;img/luffy.jpg&#39;;
      var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
      if (!canvas || !canvas.getContext) {
        return false;
      }else{
        context = canvas.getContext(&#39;2d&#39;);
      }
    }
    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(&#39;canvas&#39;);

      img.onload = function onImageLoad() {
        mem_canvas.width = img.width;
        mem_canvas.height = img.height;
        mem_context = mem_canvas.getContext(&#39;2d&#39;);
        mem_context.drawImage(img, 0, 0);
        imageData = mem_context.getImageData(0, 0, mem_canvas.width, mem_canvas.height);
        startFadeIn();
      }
      img.src = &#39;img/luffy.jpg&#39;;
      var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
      if (!canvas || !canvas.getContext) {
        return false;
      }else{
        context = canvas.getContext(&#39;2d&#39;);
      }
    }
    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如何实现马赛克的淡入淡出效果（代码）的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7554

CakePHP 教程

1382

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

h5项目怎么运行 Apr 06, 2025 pm 12:21 PM

运行 H5 项目需要以下步骤：安装 Web 服务器、Node.js、开发工具等必要工具。搭建开发环境，创建项目文件夹、初始化项目、编写代码。启动开发服务器，使用命令行运行命令。在浏览器中预览项目，输入开发服务器 URL。发布项目，优化代码、部署项目、设置 Web 服务器配置。

H5页面制作究竟指什么 Apr 06, 2025 am 07:18 AM

H5 页面制作是指使用 HTML5、CSS3 和 JavaScript 等技术，创建跨平台兼容的网页。其核心在于浏览器解析代码，渲染结构、样式和交互功能。常见技术包括动画效果、响应式设计和数据交互。为避免错误，应使用开发者工具调试；而性能优化和最佳实践则包括图像格式优化、减少请求和代码规范等，以提高加载速度和代码质量。