使用canvas制作炫酷黑客帝国数字雨背景html+css+js
目录
- 制作：
- 1.定义canvas标签：
- 2.开始js部分，先定义变量：
- 3.初始化字符串数组，先给每条字符串位置，字符先不给：
- 4.绘制每条字符串：
- 5.更新字符串：
- 6.设置动画过程：
- 7.在窗口大小改变时，设置canvas画布能实时铺满屏幕：
- 完整代码：
制作：
1.定义canvas标签：
<canvas id="canvas"></canvas>
2.开始js部分，先定义变量：
/* 获取画布 */
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext('2d');
/* 定义一个字符串数组，后面字符串会从里随机选值 */
var text = "SAFAF1D56FLK43F7PHM76VC9XNJL23";
/* 定义 w为窗口宽度，h为窗体高度 */
var w=window.innerWidth;
var h=window.innerHeight;
/* 设置len为20，其为背景里每条字符串的长度 */
var len = 20;
/* 设置num为100，窗口一共显示100条字符串 */
var num = 100;
/* 定义数组，里面存取每条字符串的字符与位置 */
var arr=[];
/* 画布宽等于窗口宽 */
canvas.width=window.innerWidth;
/* 画布高等于窗口高 */
canvas.height=window.innerHeight;
3.初始化字符串数组，先给每条字符串位置，字符先不给：
/* 初始化字符串数组 */
for(let i=0;i<num;i++){
/* 用.push方法给arr数组添加值 */
arr.push({
/* 字符先为空 */
str:[],
/* x轴位置为窗口宽度乘上一个0带1的随机数 */
x: parseInt(w*Math.random()),
/* y轴位置为窗口高度乘上一个0带1的随机数，再减个150把，可以为负数 */
y: parseInt(h*Math.random()-150)
})
}
4.绘制每条字符串：
/* 绘制每条字符串 */
function txt(){
/* 给个循环，共绘制num条 */
for(let i=0;i<num;i++){
/* 设置变量letter为当前arr数组里的第i条字符串 */
var letter = arr[i];
/* 让字符串的字符为空 */
letter.str = [];
/* 给个循环，一个字符一个字符的拼接成字符串 */
for(let k=0;k<len;k++){
/* 随机选取text里的一个字符 */
letter.str.push(text[Math.floor(Math.random() * text.length)]);
}
/* 再来循环，开始绘制渲染字符串的每个字符 */
for(let j=0;j<len;j++){
if(j==len-1){
/* 第一个字符为白色 */
ctx.fillStyle = `rgb(255, 255, 255)`;
}else{
/* 后面的为绿色，慢慢变不透明 */
ctx.fillStyle = `rgba(0, 255, 21,${j*0.15})`;
}
/* 渲染字符 */
ctx.font = "20px FangSong";
ctx.fillText(letter.str[j],letter.x,letter.y+j*15);
}
}
/* 调用更新 */
move();
}
5.更新字符串：
/* 让字符串移动，若某字符串出了可视区，则重新生成 */
function move(){
/* 来个循环，给全部字符串更新位置 */
for(let j=0;j<num;j++){
/* y轴位置加3 */
arr[j].y=arr[j].y+3;
/* 如果改字符已经走出窗口了重新赋值 */
if(arr[j].y>=h){
arr[j]={
str:[],
x: parseInt(w*Math.random()),
y: parseInt(h*Math.random()-150)
}
}
}
}
6.设置动画过程：
setInterval(function(){
/* 清屏 */
ctx.clearRect(0,0,w,h);
/* 渲染 */
move();
/* 更新 */
txt();
},50);
7.在窗口大小改变时，设置canvas画布能实时铺满屏幕：
/* 绑定窗口大小发生改变事件，重新绘制字符串数组，让canvas随时铺满浏览器可视区 */
window.onresize=resizeCanvas;
function resizeCanvas(){
w=canvas.width=window.innerWidth;
h=canvas.height=window.innerHeight;
/* 重新给全部字符串赋值 */
for(let j=0;j<num;j++){
arr[j]={
str:[],
x: parseInt(w*Math.random()),
y: parseInt(h*Math.random()-150)
}
}
}
resizeCanvas();
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
background-color: rgb(0, 0, 0);
}
canvas{
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
h1{
font-family: 'FangSong';
position: fixed;
top: 50%;
left: 50%;
transform: translate(-40%,-50%);
font-size: 3em;
color: rgb(255, 255, 255);
text-shadow: 0 0 10px rgb(30, 255, 0),
0 0 20px rgb(30, 255, 0),
0 0 30px rgb(30, 255, 0),
0 0 50px rgb(30, 255, 0);
}
</style>
</head>
<body>
<h1>北极光之夜。</h1>
<canvas id="canvas"></canvas>
<script>
/* 获取画布 */
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext('2d');
/* 定义一个字符串数组，后面字符串会从里随机选值 */
var text = "SAFAF1D56FLK43F7PHM76VC9XNJL23";
/* 定义 w为窗口宽度，h为窗体高度 */
var w=window.innerWidth;
var h=window.innerHeight;
/* 设置len为20，其为背景里每条字符串的长度 */
var len = 20;
/* 设置num为100，窗口一共显示100条字符串 */
var num = 100;
/* 定义数组，里面存取每条字符串的字符与位置 */
var arr=[];
/* 画布宽等于窗口宽 */
canvas.width=window.innerWidth;
/* 画布高等于窗口高 */
canvas.height=window.innerHeight;
/* 绑定窗口大小发生改变事件，重新绘制字符串数组，让canvas随时铺满浏览器可视区 */
window.onresize=resizeCanvas;
function resizeCanvas(){
w=canvas.width=window.innerWidth;
h=canvas.height=window.innerHeight;
/* 重新给全部字符串赋值 */
for(let j=0;j<num;j++){
arr[j]={
str:[],
x: parseInt(w*Math.random()),
y: parseInt(h*Math.random()-150)
}
}
}
resizeCanvas();
/* 初始化字符串数组 */
for(let i=0;i<num;i++){
/* 用.push方法给arr数组添加值 */
arr.push({
/* 字符先为空 */
str:[],
/* x轴位置为窗口宽度乘上一个0带1的随机数 */
x: parseInt(w*Math.random()),
/* y轴位置为窗口高度乘上一个0带1的随机数，再减个150把，可以为负数 */
y: parseInt(h*Math.random()-150)
})
}
/* 绘制每条字符串 */
function txt(){
/* 给个循环，共绘制num条 */
for(let i=0;i<num;i++){
/* 设置变量letter为当前arr数组里的第i条字符串 */
var letter = arr[i];
/* 让字符串的字符为空 */
letter.str = [];
/* 给个循环，一个字符一个字符的拼接成字符串 */
for(let k=0;k<len;k++){
/* 随机选取text里的一个字符 */
letter.str.push(text[Math.floor(Math.random() * text.length)]);
}
/* 再来循环，开始绘制渲染字符串的每个字符 */
for(let j=0;j<len;j++){
if(j==len-1){
/* 第一个字符为白色 */
ctx.fillStyle = `rgb(255, 255, 255)`;
}else{
/* 后面的为绿色，慢慢变不透明 */
ctx.fillStyle = `rgba(0, 255, 21,${j*0.15})`;
}
/* 渲染字符 */
ctx.font = "20px FangSong";
ctx.fillText(letter.str[j],letter.x,letter.y+j*15);
}
}
/* 调用更新 */
move();
}
/* 让字符串移动，若某字符串出了可视区，则重新生成 */
function move(){
/* 来个循环，给全部字符串更新位置 */
for(let j=0;j<num;j++){
/* y轴位置加3 */
arr[j].y=arr[j].y+3;
/* 如果改字符已经走出窗口了重新赋值 */
if(arr[j].y>=h){
arr[j]={
str:[],
x: parseInt(w*Math.random()),
y: parseInt(h*Math.random()-150)
}
}
}
}
setInterval(function(){
/* 清屏 */
ctx.clearRect(0,0,w,h);
/* 渲染 */
move();
/* 更新 */
txt();
},50);
</script>
</body>
</html>
到此这篇关于使用canvas制作炫酷黑客帝国数字雨背景html+css+js的文章就介绍到这了,更多相关canvas制作数字雨背景特效html+css+js内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JavaScript canvas实现流星特效
本文实例为大家分享了JavaScript canvas实现流星特效展示的具体代码,供大家参考,具体内容如下 1.控制透明度变化函数 function easeInQuad(curtime,begin,end,duration){ let x = curtime/duration; //x值 let y = x*x; //y值 return begin+(end-begin)*y; //套入最初的公式 } //用平方根构建的缓慢减速运动 核心函数:x*x + 2*x function easeOu
-
JavaScript利用canvas实现鼠标跟随特效
目录 前言 创建canvas画布 定义鼠标 x / y 初始化canvas 画箭头 循环动画 鼠标事件 前言 canvas是一个很神奇的玩意儿,比如画表格.画海报图都要用canvas去做,前几天有用css去做一个鼠标跟随的恶魔之眼的动画效果,想着能不能用canvas也做一个鼠标跟随的效果呢? 创建canvas画布 canvas画布创建可以直接用canvas标签即可 <canvas></canvas> 也没有过多的样式,基本都是用js去完成画布中的内容的 const canvas =
-
JavaScript+Canvas实现文字粒子流特效
目录 动手前思考 绘制文字 获取像素点位 渲染粒子 简单的动画效果 1.随机选择四个方向中的某一个方向,生成初始坐标 2.从初始位置运动到实际位置 3.点击文字炸开的特效 动手前思考 首先要在特定的位置生成粒子,要获取到canvas上像素的点位,通过canvas的getImageData函数我们可以得到canvas像素点的信息,获取像素点中透明度大于0的位置. 绘制文字 新建一个canvas画布,在画布上绘制任意的文字 ctx.font = "200px Arial"; ctx.fon
-
JS前端使用Canvas快速实现手势解锁特效
目录 前言 Demo 需要实现的功能 初始化数据和页面渲染 touchstart 手指开始触摸事件 touchmove 监听手指滑动事件 touchend 监听手指触摸结束事件 页面滚动处理 连接的两颗星星之间有其他星星时 前言 之前在公司开发活动项目的时候,遇到一个项目需求要让用户使用手势画星位图来解锁星座运势,一看设计稿,这不就是我们平时的手机屏幕解锁吗?于是上网搜了一些关于手势解锁的文章,没找到可以直接复用的,于是只能自己打开canvas教程,边学习边设计实现了这个功能,同时兼容了移动端和
-
教你用几十行js实现很炫的canvas交互特效
目录 1.画圆 2.鼠标移动的圆 3.鼠标拖动的粒子 4.颜色渐变的粒子 5.连接的粒子 总结 废话不多说,先上效果图! 本篇文章的示例代码都是抄的一个叫Franks的老外在yutube上的一个教学视频,他还出了很多关于canvas的视频,十分值得学习,而我对canvas也不太熟悉,跟着大神一起敲代码,做个学习笔记,还要说一下,本文示例的页面结构很简单(html只包含一个canvas),后面代码部分就不贴了,毕竟js才是主角. 1.画圆 首先从画一个静态的圆开始吧,只需要了解很少的API即可,M
-
使用canvas制作炫酷黑客帝国数字雨背景html+css+js
目录 制作: 1.定义canvas标签: 2.开始js部分,先定义变量: 3.初始化字符串数组,先给每条字符串位置,字符先不给: 4.绘制每条字符串: 5.更新字符串: 6.设置动画过程: 7.在窗口大小改变时,设置canvas画布能实时铺满屏幕: 完整代码: 制作: 1.定义canvas标签: <canvas id="canvas"></canvas> 2.开始js部分,先定义变量: /* 获取画布 */ var canvas = document.query
-
JS+CSS3制作炫酷的弹窗效果
昨天在家看电视时,退出的时候发现了一个弹窗效果,整个背景模糊,觉得这样的效果好炫,要比纯色加透明度高大上好多,连续试了几个界面,最终确定效果由css实现的,于是今天一大早来到公司便赶紧搜索了一下,虽然兼容性奇差,但是一个css属性就可以搞定.瞬间感觉自己知道的真是太少了~~ 首先回忆一下弹窗的实现,一般我们分为两层,弹出窗口层(popus)和遮罩层(mask),通常情况下我习惯就这两元素全部设成fixed定位,具体和absolute区别一试便知.对于mask层自不用多少,我们如下给他设置属性,让
-
vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）
前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给定合理的帧数,不断的清除画布,再重绘图形,即呈现出动画效果. 让我们先看下效果 说明:此gif清晰度很低,因为转成gif图的时候,质量受损,帧数减少,所以倒计时转到红色时候看起来变的很模糊.但是实际在浏览器上效果全程都是很清晰和连贯的 使用 npm npm install vue-canvas-co
-
Android自定义View实现黑客帝国数字雨效果
0. 昨天又看了一遍黑客帝国,怎么说了,时隔多年,依旧那么经典,小时候看不懂,现在再看却有很多体味.小时候看时印象最深的就是数字雨了,导致我现在写代码也要是黑屏.所以今天上午,闲来无事,拿出两个小时写了一个数字雨控件,直接上图. 1. 先分析,再动笔.这里我将代码分为两部分,一个数字雨中的每一列NumberRainItem,还有就是所有列合并起来的NumberRain. NumberRain比较简单,就是继承自LinearLayout的一个控件,在计算出宽度后添加NumberRainItem,很
-
Android中通过AsyncTask类来制作炫酷进度条的实例教程
AsyncTask (API level 3,所以几乎所有目前在市面上流通的 Android 版本皆可使用) 是除 Thread 外的另一种选择,Android 团队鼓励主执行绪(UI thread) 专注于操作 & 画面的流畅呈现, 其余工作 (如网络资料传输.档案/磁碟/资料存取) 最好都在背景执行: Thread 通常要搭配 Handler 使用,而 AsyncTask 用意在简化背景执行 thread 程序码的撰写. 如果您预期要执行的工作能在几秒内完成,就可以选择使用 AsyncTas
-
黑客帝国数字雨效果VC6源代码分享
很不错的效果 这个在Win7 X64 VC6编译通过~~ 代码原作者不详. #include <windows.h> #define ID_TIMER 1 #define STRMAXLEN 25 //一个显示列的最大长度 #define STRMINLEN 8 //一个显示列的最小长度 LRESULT CALLBACK WndProc (HWND, UINT, WPARAM, LPARAM) ; ////////////////////////////////////////////////
-
基于canvas实现超炫酷的流水灯效果
本文实例为大家分享了基于canvas实现超炫酷的流水灯效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基于canvas超炫酷的流水灯效果</title> <style> *{ margin: 0; padding: 0; } canvas{ border: 1px solid red; wi
-
Python分聃 之数字雨加入潘周聃运动曲线的详细过程
目录 前言 什么是潘周聃运动曲线 模型求解: 垂直方向运动模型求解: 水平方向运动模型求解: 模型验证 静态验证 动态验证 制作偏移量生成工具 数字雨效果制作 声明 前言 相信各位同学最近一定被潘周聃刷屏和洗脑了,互联网上也出现了这种各样的模仿者,做为思维活跃的IT人,网上冲浪先进分子,以及整活小能手,我们当然也不能落伍,话不多说,整活开始. 什么是潘周聃运动曲线 首先,这个在曲线在热点时间出现之前是不存在的,这条曲线是博主勇敢di牛牛在总结了潘周聃的起身动作特点后总结出来的.下面详细介绍曲线产
-
教你制作Android中炫酷的ViewPagerIndicator(不仅仿MIUI)
1.概述 今天给大家带来一个ViewPagerIndicator的制作,相信大家在做tabIndicator的时候,大多数人都用过TabPageIndicator,并且很多知名APP都使用过这个开源的指示器.大家有没有想过如何自己去实现这样的一个指示器,并且代码会有多复杂呢~~~ 今天,我就带领大家来从无到有的实现这样一个指示器,当然了,不准备一模一样,搞得没有创新似的,再看标题,跟MIUI相关,所以我们准备做一个特性与TabPageIndicator一致的,但是样子和MIUI的Tab一样的~~
-
canvas+gif.js打造自己的数字雨头像的示例代码
前天 是1024程序员节,不知道各位看官过的怎么样.既然是过节,就要有个过节的样子,比方说,换个头像