html5简单特效代码 html5零基础入门教程
在显示马赛克图像时，淡入动画是从非常模糊的马赛克逐渐变成非常清晰的马赛克的过程，淡出动画是从清晰的图像慢慢变成模糊的过程。下面我们来看看具体内容。我们先来看看马赛克
在显示马赛克图像时，淡入动画是从非常模糊的马赛克逐渐变成非常清晰的马赛克的过程，淡出动画是从清晰的图像慢慢变成模糊的过程。下面我们来看看具体内容。
我们先来看看马赛克图像的淡入效果
代码如下所示
& lt！DOCTYPE html & gt
& lthtml & gt
& lthead & gt
& ltmeta http-equiv = ”内容类型”内容= ”文本/html；charset = utf-8 ″/>
& lttitle & gt& lt/title >
& ltmeta charset = & # 8221utf-8 ″/>
& lt脚本类型= ”text/JavaScript ”& gt
var imageData
var fade mosaicsize = 0；
var THandle
var mem _ canvas
var mem _ context
var上下文；
var img;var img
函数loadImage() {
img = new Image()；
mem _ canvas = document . createelement(‘画布’);
img . onload = function on image load(){
mem_canvas.width = img.width;mem _ canvas . width = img . width；
mem_canvas.height = img.height;mem _ canvas . height = img . height；
mem _ context = mem _ canvas . get context(‘2d & # 8217);
mem_context.drawImage(img, 0, 0);mem_context.drawImage(img，0，0)；
imageData = mem _ context . getimagedata(0，0，mem_canvas.width，mem _ canvas . height)；
startFadeIn()；
}
img.src = & # 8216img/luffy . jpg ’；
var canvas = document . getelementbyid(‘SimpleCanvas & # 8217);
如果(！画布||！canvas.getContext) {
返回false
}否则{
context = canvas . get context(‘2d & # 8217);
}
}
函数startFadeIn() {
fadeMosaicSize = 64
THandle = setInterval(onFadeIn，50)；
}
函数onFadeIn() {
if(fade mosaicsize <= 1) {
clear interval(THandle)；
context.drawImage(img, 32, 32);context.drawImage(img，32，32)；
}否则{
CreateMosaic(mem_context，mem_canvas.width，mem_canvas.height，fade mosaicsize)；
context.drawImage(mem_canvas，32，32)；
fade mosaicsize = math . floor(fade mosaicsize/1.5)；
}
}
函数CreateMosaic(context，width，height，mosaicSize) {
var x = 0；
var y = 0；
for(y = 0；y & lt身高；y = y + mosaicSize) {
for(x = 0；x & lt宽度；x = x + mosaicSize) {
var cR = image data . data[(y * width+x)* 4]；
var cG = image data . data[(y * width+x)* 4+1]；
var cB = imagedata . data[(y * width+x)* 4+2]；
context.fillStyle = & # 8220RGB(“+cR+”,”+cG+”,”+c b+ ”)”；
context.fillRect(x，y，x + mosaicSize，y+mosaic size)；
}
}
}
& lt/script >
& lt/head >
& ltbody onload = & # 8221loadImage()；”style = & # 8221背景色:# D0D0D0”& gt
& lt画布id = & # 8221SimpleCanvas & # 8221宽度= ”640″身高= ”360″style = & # 8221背景色:# FFFFFF”& gt& lt/canvas >
& ltdiv & gt画布演示& lt/div >
& ltdiv id = & # 8221输出”& gt& lt/div >
& lt/body >
& lt/html >
描述:
由于body标记的onload事件，当页面显示时，它将通过调用loadImagen()函数开始处理。
页面显示后，创建一个内部绘制的Canves对象并读取图像。获取渲染的像素数据。此后，启动定时器处理，并且在定时器事件中创建马赛克图像并将其绘制在屏幕上。当执行定时器处理时，马赛克的尺寸将减小，马赛克动画将从非常厚的马赛克变得清晰，以显示淡入效果。
要调整渐变速度，您可以更改计时器间隔，
fade mosaicsize = math . floor(fade mosaicsize/1.5)；
运行结果:
上面显示的HTML文件。显示深马赛克图像。
这是一个动态的过程，图像会慢慢变得清晰，最后会出现以下效果。
看完淡入效果，我们再来看看马赛克图片淡入效果的实现。
代码如下所示
& lt！DOCTYPE html & gt
& lthtml & gt
& lthead & gt
& ltmeta http-equiv = ”内容类型”内容= ”文本/html；charset = utf-8 ″/>
& lttitle & gt& lt/title >
& ltmeta charset = & # 8221utf-8 ″/>
& lt脚本类型= ”text/JavaScript ”& gt
var imageData
var fade mosaicsize = 0；
var THandle
var mem _ canvas
var mem _ context
var上下文；
var img;var img
函数loadImage() {
img = new Image()；
mem _ canvas = document . createelement(‘画布’);
img . onload = function on image load(){
mem_canvas.width = img.width;mem _ canvas . width = img . width；
mem_canvas.height = img.height;mem _ canvas . height = img . height；
mem _ context = mem _ canvas . get context(‘2d & # 8217);
mem_context.drawImage(img, 0, 0);mem_context.drawImage(img，0，0)；
imageData = mem _ context . getimagedata(0，0，mem_canvas.width，mem _ canvas . height)；
startFadeIn()；
}
img.src = & # 8216img/luffy . jpg ’；
var canvas = document . getelementbyid(‘SimpleCanvas & # 8217);
如果(！画布||！canvas.getContext) {
返回false
}否则{
context = canvas . get context(‘2d & # 8217);
}
}
函数startFadeIn() {
fadeMosaicSize = 64
THandle = setInterval(onFadeIn，50)；
}
函数startFadeOut() {
fade mosaicsize = 1；
THandle = setInterval(onFadeOut，50)；
}
函数onFadeIn() {
if(fade mosaicsize <= 1) {
clear interval(THandle)；
context.drawImage(img, 32, 32);context.drawImage(img，32，32)；
THandle = setInterval(onShow，2000)；
}否则{
CreateMosaic(mem_context，mem_canvas.width，mem_canvas.height，fade mosaicsize)；
context.drawImage(mem_canvas，32，32)；
fade mosaicsize = math . floor(fade mosaicsize/1.5)；
}
}
函数onShow() {
clear interval(THandle)；
startFadeOut()；
}
函数onFadeOut() {
如果(64 & ltfadeMosaicSize) {
clear interval(THandle)；
context.fillStyle = & # 8220# FFFFFF ”
context.fillRect(32，32，mem_canvas.width，mem _ canvas . height)；
}否则{
CreateMosaic(mem_context，mem_canvas.width，mem_canvas.height，fade mosaicsize)；
context.drawImage(mem_canvas，32，32)；
fade mosaicsize = math . ceil(fade mosaicsize * 1.5)；
}
}
函数CreateMosaic(context，width，height，mosaicSize) {
var x = 0；
var y = 0；
for(y = 0；y & lt身高；y = y + mosaicSize) {
for(x = 0；x & lt宽度；x = x + mosaicSize) {
var cR = image data . data[(y * width+x)* 4]；
var cG = image data . data[(y * width+x)* 4+1]；
var cB = imagedata . data[(y * width+x)* 4+2]；
context.fillStyle = & # 8220RGB(“+cR+”,”+cG+”,”+c b+ ”)”；
context.fillRect(x，y，x + mosaicSize，y+mosaic size)；
}
}
}
& lt/script >
& lt/head >
& ltbody onload = & # 8221loadImage()；”style = & # 8221背景色:# D0D0D0”& gt
& lt画布id = & # 8221SimpleCanvas & # 8221宽度= ”640″身高= ”360″style = & # 8221背景色:# FFFFFF”& gt& lt/canvas >
& ltdiv & gt画布演示& lt/div >
& ltdiv id = & # 8221输出”& gt& lt/div >
& lt/body >
& lt/html >
描述:
处理完前面的代码后，执行2秒的间隔，然后在这个间隔内执行onFadeOut，也就是淡出前执行的代码。
运行结果
执行上面的HTML文件将会显示如下的马赛克效果
然后逐渐变得清晰，如下
之后图像显示两秒左右，然后图像的马赛克效果开始出现，如下图所示。
然后，马赛克逐渐变厚，最后隐藏起来。如下图所示，页面上什么都没有留下。
以上是HTML5 canvas如何实现马赛克的褪色效果(代码)的详细内容。更多请关注其他相关文章！
