canvas动画之三 -- 黑客帝国文字掉落效果

今天要实现的效果是黑客帝国里面的文字掉落效果，先来看一下图

点击这里，查看demo

其实效果也是比较好实现的，只要计算出每个文字该出现的地方，然后绘制文字就可以了。

下面就来说具体的实现方法吧。

首先，新建页面写上canvas标签，在js中获取到并设置高宽：

<canvas id="canvas"></canvas>
<script>var canvas = document.getElementById("canvas"),ctx = canvas.getContext("2d");//设置canvas大小，全屏显示setSize();//设置大小的函数function setSize(){canvas.width = window.innerWidth;canvas.height = window.innerHeight;}
</script>

canvas标签设置完了之后，然后再来设置一个数组，也就是从屏幕上掉落出来哪些文字，当然这里设置什么都可以，我设置的是0~9、a~z，为了简单我就是使用了split方法将字符串转换为数组：

var txt = "0123456789abcdefghijklmnopqrstuvwxyz";
var arr = txt.split("");

接下来就该设置一下字体的大小和屏幕总共能容纳多少列了，这里我把字体大小设置为16px，为了方便计算这里先设置为16，然后用浏览器的宽度除以字体大小，就能计算出来屏幕可以容纳多少列文字，还需要设置一个数组，来保存每一列中的文字该在哪里绘制，当然每列第一个字都是从屏幕最上面开始，需要初始化一下：

//字体大小
var font_size = 16;
//多少列，整数
var column = Math.floor(canvas.width / font_size) ;
//每列文字绘制点
var drop = [];
//初始化数组
for(let i = 0;i<column ; i++){drop[i] = 1;
}

刚刚忘了一点，没有设置onresize，这里设置一下，当然这个在什么时候设置都是可以的，在window上添加onresize事件，浏览器窗口改变时重新计算canvas的大小：

window.onresize = function(){setSize();
}function setSize(){canvas.width = window.innerWidth;canvas.height = window.innerHeight;
}

现在准备工作都完成了，接下来就开始绘制文字效果吧，前面已经定义了数组，现在需要从数组中随机取得一个数字，通过Math.random()产生随机数获取，输出文字时使用fillText()可以在指定位置输出文字，当每一列中绘制的文字超过浏览器的高度时，则从0开始重新绘制，当然如果所有的列都是在占满浏览器高度再重新绘制时这样的效果并不好看，所以我们需要一个随机数，当随机数大于0.9的时候就重新绘制，绘制完每一列文字的时候，需要保存一下下一次该列文字该在什么地方出现：

//逐行输出文字
for (var i = 0; i < drops.length; i++) {//随机取要输出的文字var text = txts[Math.floor(Math.random() * txts.length)];//输出文字，注意坐标的计算ctx.fillText(text, i * font_size, drops[i] * font_size);//如果绘满一屏或随机数大于0.95（此数可自行调整，效果会不同）if (drops[i] * font_size > c.height || Math.random() > 0.95){drops[i] = 0;}//用于Y轴坐标增加drops[i]++;
}

在上面这个循环之前为了让效果更好看，我们需要让背景透明度逐渐变化，并且还需要设置好字体，所以整个draw()函数如下：

//输出文字
function draw() {//让背景逐渐由透明到不透明ctx.fillStyle = "rgba(0, 0, 0, 0.05)";ctx.fillRect(0, 0, c.width, c.height);ctx.fillStyle = "#0F0"; //文字颜色ctx.font = font_size + "px arial";//逐行输出文字for (var i = 0; i < drops.length; i++) {//随机取要输出的文字var text = txts[Math.floor(Math.random() * txts.length)];//输出文字，注意坐标的计算ctx.fillText(text, i * font_size, drops[i] * font_size);//如果绘满一屏或随机数大于0.95（此数可自行调整，效果会不同）if (drops[i] * font_size > c.height || Math.random() > 0.95){drops[i] = 0;}//用于Y轴坐标增加drops[i]++;}
}

接下来只要让它不断的循环绘制就可以了：

init();//初始化
function init(){setSize();setInterval(draw,50);
}

然后整个绚丽的效果就完成了，是不是很简单呢。

下面是整个代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>黑客帝国</title><style>*{padding: 0;margin:0;}</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>var canvas = document.getElementById("canvas"),ctx = canvas.getContext("2d");setSize();var arr = "0123456789abcdefghijklmnopqrstuvwxyz".split("");var font_size = 16;var column = Math.floor(canvas.width / font_size) ;var drop = [];for(let i = 0;i<column ; i++){drop[i] = 1;}init();//初始化function init(){setSize();setInterval(draw,50);}//输出文字function draw(){ctx.fillStyle = "rgba(0, 0, 0, 0.05)";ctx.fillRect(0,0,canvas.width,canvas.height);ctx.fillStyle = "#0F0";  //文字颜色ctx.font = font_size + "px arial";//逐行输出文字for(var i = 0;i<drop.length ; i++){//随机输出文字var text = arr[Math.floor(Math.random()*arr.length)];//输出文字，坐标重新计算ctx.fillText(text,i*font_size, drop[i]*font_size);//如果绘满一页或者随机数超过0.9则重新绘制if(drop[i] * font_size >canvas.height || Math.random() > 0.9){drop[i] = 0;}drop[i] ++ ;}}window.onresize = function(){setSize();}function setSize(){canvas.width = window.innerWidth;canvas.height = window.innerHeight;}
</script>
</body>
</html>

canvas动画之三 -- 黑客帝国文字掉落效果相关推荐

从天而降的文字，文字掉落效果
从天而降的文字,文字掉落效果,文字(字符)一个个从网页顶部向下落下来,最终形成一句话.一款基于JavaScript文字特效,效果挺流畅的JavaScript文字掉落特效. <html> & ...
Flutter抖动动画、颤抖动画、Flutter文字抖动效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. github? 你可能需要百度同步 CSDN 网易云课堂教程掘金知乎 Flutter系列文章头条同步 1 添加 ...
Canvas实战---模仿GOOGLE浮动小球效果
看到基于Canvas动画的Google浮动小球效果,非常炫,决定自己尝试模仿着做一个. Demo:http://qs20199.github.io/SuspendingBall/ 这个Demo并不难, ...
字掉落炫酷网站_16个富有创意的HTML5 Canvas动画特效集合
本文作者html5tricks,转载请注明出处 1.HTML5 Canvas高空瀑布下落湖面动画 HTML5 Canvas是一个神奇的网页技术,我们在Canvas画布上可以做任何有趣的事情.今天要分享 ...
canvas动画:黑客帝国_使用Canvas API进行动画处理-第3部分：重力和动态渲染
canvas动画:黑客帝国 Over in Part 2 of this series we created a ball that would ricochet around the screen ...
html5常用动画效果教程,HTML5教程 8个经典HTML5 Canvas动画学习
本篇教程探讨了HTML5教程 8个经典HTML5 Canvas动画学习,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < HTML5非常强大,尤其是Canvas ...
canvas文字粒子效果 html+css+js 3点饮茶，7点放工，美滋滋~
先言: 今天3点多在饮茶的时候,发现有好几天没水文章了,但是太难的玩意又不会啊,咋办,突然想起电脑里还有存着一个文字粒子特效,好家伙,这不就来了,先看效果如下: 因为gif图最大5m,但是这东西演示 ...
在线黑客帝国文字效果生成工具
在线黑客帝国文字效果生成工具在线黑客帝国文字效果生成工具提供一批段落文本,段落以回车分隔,工具将会随机抽取部分段落文字用于展示黑客帝国的文字瀑布特效,可以根据实际情况调整段落长度. https:/ ...
AE502 112种创意视频字幕动画呼出线框文字标题效果包括PR预设与扩展脚本ae模板
AE502 112种创意视频字幕动画呼出线框文字标题效果包括PR预设与扩展脚本ae模板 [模板介绍] 分辨率:1920×1080 文件大小:1.38 GB 文件格式:.Mogrt(PR预设),.AEP ...
AE470 卡通元素动画视频字幕预设手绘歌词文字标题效果制作AE片头
AE470 卡通元素动画视频字幕预设手绘歌词文字标题效果制作AE片头 [AE模板介绍] 模板用途:秋天,美丽,卡通,多彩的,家庭,手绘,爱情告白,歌词,心情,音乐视频,演示,幻灯片,文字动画,标题,过 ...

canvas动画之三 -- 黑客帝国文字掉落效果

canvas动画之三 -- 黑客帝国文字掉落效果相关推荐

最新文章

热门文章