Wie realisiert HTML5-Canvas den Ein- und Ausblendeffekt von Mosaik (Code)?-H5-Tutorial-php.cn

Wie realisiert HTML5-Canvas den Ein- und Ausblendeffekt von Mosaik (Code)?

不言

Freigeben： 2018-12-03 10:42:05

Original

5609 Leute haben es durchsucht

Bei der Anzeige eines Mosaikbildes ist die Einblendanimation der Prozess des allmählichen Übergangs von einem sehr verschwommenen zu einem sehr klaren Mosaik. Bei der Verarbeitung der Ausblendanimation wird das Bild klar und dann langsam unscharf. Werfen wir einen Blick auf die Details unten.

HTML5 canvas

Werfen wir zunächst einen Blick auf den Einblendeffekt des Mosaikbildes

Der Code lautet wie folgt

<!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>

Nach dem Login kopieren

Hinweis:

Aufgrund des Onload-Ereignisses des Body-Tags beginnt die Verarbeitung mit dem Aufruf der Funktion „loadImagen()“, wenn die Seite angezeigt wird.

Nachdem die Seite angezeigt wird, erstellen Sie ein intern gezeichnetes Canves-Objekt und lesen Sie das Bild. Holen Sie sich die gezeichneten Pixeldaten. Starten Sie anschließend die Timer-Verarbeitung, erstellen Sie das Mosaikbild im Timer-Ereignis und zeichnen Sie es auf den Bildschirm. Beim Ausführen der Timer-Verarbeitung wird die Mosaikgröße (fadeMosaicSize) reduziert, beginnend mit einem sehr dicken Mosaik bis hin zu einer sehr klaren Mosaikanimation, um den Einblendeffekt darzustellen.

Um die Gradientengeschwindigkeit anzupassen, können Sie das Timer-Intervall ändern,

fadeMosaicSize = Math.floor(fadeMosaicSize / 1.5);

Nach dem Login kopieren

Laufergebnisse:

Zeigen Sie die obige HTML-Datei an. Zeigt ein tiefes Mosaikbild an.

HTML5 canvas

Dies ist ein dynamischer Prozess, das Bild wird langsam klarer und schließlich tritt der folgende Effekt ein

HTML5 canvas

Nachdem wir uns den Einblendeffekt angesehen haben, werfen wir einen Blick auf die Implementierung des Ein- und Ausblendeffekts des Mosaikbilds

Der Code lautet wie folgt

<!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>

Nach dem Login kopieren

Anweisungen:

In Nachdem der vorherige Code verarbeitet wurde, führt er ein 2-Sekunden-Intervall aus und führt dann in diesem Intervall onFadeOut aus, das ist der Code, der vor dem Ausblenden ausgeführt wurde.

Ergebnisse ausführen

Führen Sie die obige HTML-Datei aus und der folgende Mosaikeffekt wird angezeigt

Wie realisiert HTML5-Canvas den Ein- und Ausblendeffekt von Mosaik (Code)?

Dann wird es allmählich klar, wie folgt

Wie realisiert HTML5-Canvas den Ein- und Ausblendeffekt von Mosaik (Code)?

Danach wird das Bild etwa zwei Sekunden lang angezeigt und dann beginnt das Bild einen Mosaikeffekt zu haben, wie im Bild unten gezeigt

Wie realisiert HTML5-Canvas den Ein- und Ausblendeffekt von Mosaik (Code)?

Dann wird das Mosaik allmählich dicker und schließlich ausgeblendet, wie unten gezeigt, auf der Seite ist nichts mehr übrig

Wie realisiert HTML5-Canvas den Ein- und Ausblendeffekt von Mosaik (Code)?

Das obige ist der detaillierte Inhalt vonWie realisiert HTML5-Canvas den Ein- und Ausblendeffekt von Mosaik (Code)?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!