今天小编给大家分享一下怎么使用canvas制作炫酷黑客帝国数字雨背景的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
<canvas id="canvas"></canvas>
/* 获取画布 */ 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;
/* 初始化字符串数组 */ 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);
/* 绑定窗口大小发生改变事件,重新绘制字符串数组,让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; } h2{ 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> <h2>北极光之夜。</h2> <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制作炫酷黑客帝国数字雨背景”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。