溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下怎么使用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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
