Lors de l'affichage d'une image en mosaïque, l'animation de fondu entrant est le processus de changement progressif d'une mosaïque très floue à une mosaïque très claire. Le traitement de l'animation de fondu sortant est le processus par lequel l'image devient claire puis devient lentement floue. Jetons un coup d'œil aux détails ci-dessous.
Jetons d'abord un coup d'œil à l'effet de fondu de l'image mosaïque
Le code est la suivante
<!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>
Remarque :
En raison de l'événement onload de la balise body, le traitement commencera par l'appel de la fonction loadImagen() lorsque la page est affichée.
Une fois la page affichée, créez un objet Canves dessiné en interne et lisez l'image. Obtenez les données de pixels dessinés. Après cela, démarrez le traitement du minuteur, créez l'image mosaïque dans l'événement du minuteur et dessinez-la à l'écran. Lors de l'exécution du traitement par minuterie, la taille de la mosaïque (fadeMosaicSize) sera réduite, passant d'une mosaïque très épaisse à une animation de mosaïque très claire pour représenter l'effet de fondu entrant.
Pour régler la vitesse du dégradé, vous pouvez modifier l'intervalle de minuterie,
fadeMosaicSize = Math.floor(fadeMosaicSize / 1.5);
Résultats d'exécution :
Affichez le fichier HTML ci-dessus. Affiche une image en mosaïque profonde.
Il s'agit d'un processus dynamique, l'image deviendra lentement plus claire, et enfin l'effet suivant apparaîtra
Après avoir examiné l'effet de fondu entrant, examinons la mise en œuvre de l'effet de fondu entrant et sortant de l'image mosaïque
Le code est le suivant
<!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>
Instructions :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!