html5游戏开发马赛克对比,HTML5如何在canvas中实现马赛克的淡入淡出效果
HTML5如何在canvas中实现马赛克的淡入淡出效果
发布时间:2020-07-10 16:43:07
来源:亿速云
阅读:145
作者:Leah
本篇文章给大家分享的是有关HTML5如何在canvas中实现马赛克的淡入淡出效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
在显示马赛克图像时,淡入动画是逐渐从很模糊到很清晰马赛克的过程,淡出动画的处理是从图像变得清晰后又慢慢变得模糊的过程,下面我们就来看看具体的内容。
我们先来看看马赛克图像的淡入效果
代码如下
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);
}
}
}
说明:
由于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);
}
}
}
说明:
在处理完前一个代码之后,它执行2秒的间隔,然后在该间隔中执行onFadeOut,是淡出之前执行的代码。
运行结果
执行上面的HTML文件,将显示如下马赛克效果
然后逐渐变得清晰,如下
之后,图像显示约两秒钟,然后图像开始出现马赛克效果,如下图所示
然后,马赛克逐渐变粗,最后隐藏,如下所示,页面什么也没有了
以上就是HTML5如何在canvas中实现马赛克的淡入淡出效果,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
html5游戏开发马赛克对比,HTML5如何在canvas中实现马赛克的淡入淡出效果相关推荐
- 【HTML5游戏开发小技巧】RPG情景对话中,令文本逐字输出
以前用javascript实现过令文本逐字输出的效果,今天我来用html5中的canvas实现一下.canvas里的内容可不像<p>那样好操作,首先,你需要懂得一些html5的API才能操 ...
- html5游戏开发box2djs,基于HTML5的WebGL结合Box2DJS物理应用
上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是 ...
- HTML5游戏开发案例教程
学习本套HTML5游戏案例开发教程需要您有一定的HTML5.JS基础,如果您还没有学过HTML5和JS请您查看本店相关教程.如果您已经具备一定的开发基础,这些教程将有助于您快速入门HTML5游戏开发. ...
- HTML5游戏开发技术基础整理
随着HTML5标准最终敲定,HTML5将有望成为游戏开发领域的的热门平台.HTML5游戏能够运行于包括iPhone系列和iPad系列在内的计算机.智能手机以及平板电脑上,是目前跨平台应用开发的最佳实施 ...
- HTML5游戏开发实战
<HTML5游戏开发实战> 基本信息 原书名:HTML5 Games Development by Example: Beginner's Guide 作者: (美)Makzan 译者: ...
- 业界技术大牛答:html5游戏开发前景如何?
编者按:作为2014年游戏业界现象级事件之一,<围住神经猫>的蹿红也为Egret(白鹭)这款游戏引擎博来了关注.Egret(白鹭)是一款可以一次开发,分别部署在Android.IOS和WP ...
- 【Canvas】HTML5游戏开发的基本流程+P2.js物理引擎实战开发
<HTML5游戏开发的基本流程> * 1. HTML5的简述 * 2. HTML5游戏开发所需的环境与工具 * 2.1. 开发环境 * 2.1.1. 浏览器 * 2.1.2. 开发语言 * ...
- HTML5游戏开发(四):飞机大战之显示场景和元素
<HTML5游戏开发>系列文章的目的有:一.以最小的成本去入门egret小项目开发,官方的教程一直都是面向中重型:二.egret可以非常轻量:三.egret相比PIXI.js和sprite ...
- HTML5游戏开发pdf
下载地址:网盘下载 迈耶编著的<HTML5游戏开发>共10章,通过10个具体的游戏示例详细介绍HTML5的用法.每章都先列出相关的技术特性并给出了应用的描述,然后讨论了实现这个应用的关键需 ...
最新文章
- 如何将本地数据库迁移到数据库上?
- 【PHP-FPM】配置,优化性能
- 批量导入sql文件。
- 角谷定理python输出变化过程,Python 100例——第十章----定理与猜想
- 油价创6个月新高,石油石化板块还能追吗?
- [vue] vue能监听到数组变化的方法有哪些?为什么这些方法能监听到呢?
- 网络服务器监测系统,网络服务器监测系统研究与开发
- 转载JNI(Windows)
- 中兴通讯首届郑和杯无线应用创作挑战赛正式启动
- 蓝桥杯 ADV-166算法提高 聪明的美食家
- 彻底解决VS中找不到 Windows SDK 版本 8.1的错误
- 3DS烧录卡?ACE3DS PRO?这是个闹剧(关于此事的新闻集合)
- 电磁学——电磁场与电磁波:麦克斯韦方程组
- 设计模式(JAVA)——Facade模式
- SSM网上校园订餐系统-javaweb, mysql
- 全球第二手机芯片厂商联发科为何节节败退?
- 沃通CA证书支持多所高校招投标文件电子签名
- XSS Challenges xss-quiz.int21h.jp
- 辰视智能董事长冯良炳博士接受深圳广电集团众创TV专访
- 为什么IT行业这么火?