首页 > 作文

html5简单特效代码(html5零基础入门教程)

更新时间:2023-04-05 06:54:34 阅读: 评论:0

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

我们先来看看马赛克图像的淡入效果

代码如下

<!doctype html>

<html>

<head>

<meta http-equiv=”content-type” 天使旋律content=”text/html; chart=utf-8″/>

<title></title>

<meta chart=”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 fal;

}el{

context = canvas.getcontext(‘2d’);

}

}

function startfadein() {

fademosaicsize = 64;

thandle = tinterval(onfadein, 50);

}

function onfadein() {

if (fademosaicsize <= 1) {

clearinterval(thandle);

context.drawimage(img, 32, 32);

} el {

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文件。显示很深的马赛克图像。

这是一个动态的过程,图像会慢慢的变清晰,最后就会出现如下效果

看完了淡入的效果,接下来我们来看看马赛克图像淡入淡出的效果实现

代码如下

<!doctype html>

<html>

<head>

<meta http-equiv=”content-type” content=”text/html; chart=utf-8″/>

<title></title>

<meta chart=”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() {

memf1视频直播_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 fal;

}el{

context = canvas.getcontext(‘2d’);

}

}

function startfadein() {

fademosaicsize = 64;

thandle严格廉洁自律 = tinterval(onfadein, 50);

}

function startfadeout() {

fademosaicsize = 1;

thandle = tinterval(onfadeout, 50);

}

function onfadein() {

if (fademosaicsize <= 1) {

clearinterval(thandle);

context.drawimage(img, 32, 32);

thandle = tinterval(onshow, 2000);

} el {

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);

} el {

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);

}

}

}

&l感叹号的句子t;/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文件,将显示如下马赛克效果

然后逐渐变得清晰,如下

之后,图像显示约两秒钟,然后图像开始出现马赛克效果,如下图所示

然后,马赛克逐渐变粗,最后隐藏,如下所示,页面什么也没有了

以上就是html5 canvas如何实现马赛克的淡入淡出效果(代码)的详细内容,更多请关注其它相关文章!

本文发布于:2023-04-05 06:54:32,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/6ef720e58d390f47f33a3acf932e875f.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:html5简单特效代码(html5零基础入门教程).doc

本文 PDF 下载地址:html5简单特效代码(html5零基础入门教程).pdf

标签:马赛克   图像   效果   计时器
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图