怎么使用canvas制作炫酷黑客帝国数字雨背景
短信预约 -IT技能 免费直播动态提醒
今天小编给大家分享一下怎么使用canvas制作炫酷黑客帝国数字雨背景的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
制作：
1.定义canvas标签：
<canvas id="canvas"></canvas>2.开始js部分，先定义变量：
var canvas = document.querySelector("#canvas"); var ctx = canvas.getContext('2d'); var text = "SAFAF1D56FLK43F7PHM76VC9XNJL23"; var w=window.innerWidth; var h=window.innerHeight; var len = 20; var num = 100; var arr=[]; canvas.width=window.innerWidth; canvas.height=window.innerHeight;3.初始化字符串数组，先给每条字符串位置，字符先不给：
for(let i=0;i<num;i++){ arr.push({ str:[], x: parseInt(w*Math.random()), y: parseInt(h*Math.random()-150) }) }4.绘制每条字符串：
function txt(){ for(let i=0;i<num;i++){ var letter = arr[i]; letter.str = []; for(let k=0;k<len;k++){ 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++){ 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画布能实时铺满屏幕：
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"; var w=window.innerWidth; var h=window.innerHeight; var len = 20; var num = 100; var arr=[]; canvas.width=window.innerWidth; canvas.height=window.innerHeight; 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++){ arr.push({ str:[], x: parseInt(w*Math.random()), y: parseInt(h*Math.random()-150) }) } function txt(){ for(let i=0;i<num;i++){ var letter = arr[i]; letter.str = []; for(let k=0;k<len;k++){ 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++){ 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制作炫酷黑客帝国数字雨背景”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
