web前端|H5教程
HTML5 canvas
web前端-H5教程
在显示马赛克图像时，淡入动画是逐渐从很模糊到很清晰马赛克的过程，淡出动画的处理是从图像变得清晰后又慢慢变得模糊的过程，下面我们就来看看具体的内容。
多选tree源码,vscode 如何添加时间,ubuntu类似yum,tomcat代码调试,sqlite做一个登录,柠檬树上长的软体爬虫,测试php安装成功,南通seo网络优化招聘,导出网站源码下载,免费jsp网站模板lzw
日报管理系统源码,ubuntu双机热备份,tomcat一直无法安装,爬虫app抓取教程,夸克下载的视频是php,家具seo专家lzw
我们先来看看马赛克图像的淡入效果
办公设备网站源码,怎么修复ubuntu系统,如何将tomcat删除,axie克制爬虫,php魔术变量用法,seo rsslzw
代码如下
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); }} }
Canvas Demo
说明：
由于body标签的onload事件，在页面显示时会通过调用loadImagen函数开始处理。
页面显示后创建内部绘制的Canves对象，并读取图像。获得绘制后的像素数据。之后，启动计时器处理，在计时器的事件中创建马赛克图像并将其绘制到画面上。在执行计时器处理时，会减少马赛克的大小（fadeMosaicSize），从很粗的马赛克开始变得很清晰的马赛克动画，以表示淡入效果。
要调整渐变速度，可以更改计时器的间隔，
fadeMosaicSize = Math.floor(fadeMosaicSize / 1.5);
运行结果：
显示上面的HTML文件。显示很深的马赛克图像。
这是一个动态的过程，图像会慢慢的变清晰，最后就会出现如下效果
看完了淡入的效果，接下来我们来看看马赛克图像淡入淡出的效果实现
代码如下
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); }} }
Canvas Demo
说明：
在处理完前一个代码之后，它执行2秒的间隔，然后在该间隔中执行onFadeOut，是淡出之前执行的代码。
运行结果
执行上面的HTML文件，将显示如下马赛克效果
然后逐渐变得清晰，如下
之后，图像显示约两秒钟，然后图像开始出现马赛克效果，下图例
然后，马赛克逐渐变粗，最后隐藏，如下所示，页面什么也没有了
