当前位置：首页 > 知识库 > 正文

html5简单特效代码（html5零基础入门教程）

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

html5简单特效代码（html5零基础入门教程） 第1张

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

代码如下

<!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" width="”640″" height="”360″ style=”background-color:#FFFFFF;”></canvas>

<div>Canvas Demo</div>

<div id=”output”></div>

</body>

</html>

说明：

在处理完前一个代码之后，它执行2秒的间隔，然后在该间隔中执行onFadeOut，是淡出之前执行的代码。

运行结果

执行上面的HTML文件，将显示如下马赛克效果

html5简单特效代码（html5零基础入门教程） 第2张

然后逐渐变得清晰，如下

html5简单特效代码（html5零基础入门教程） 第3张

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

html5简单特效代码（html5零基础入门教程） 第4张

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

html5简单特效代码（html5零基础入门教程） 第5张

以上就是HTML5 canvas如何实现马赛克的淡入淡出效果（代码）的详细内容，更多请关注其它相关文章！

微信号：sansui663（长安复制）

本文由知识库于2021-12-03发表在龙哥云资源网，如有疑问，请联系我们。
本文链接：https://longgeyun.com/knowledge/16791.html

上一篇
如何安装xp系统步骤图解（老电脑装xp系统视频教程）

下一篇
笔记本电池维修教程（笔记本电池不耐用了修复方法）

相关文章

发表评论

最新文章

推荐文章