背景頁面為黑客帝國效果
阿新 • • 發佈：2019-01-26
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style lang="css"> * { margin: 0; padding: 0; } html, body { height: 100vh; width: 100%; } body { position: relative; } canvas { display: block; z-index: -1; position: absolute; top: 0; left: 0; } </style> </head> <body> <canvas id="canvas"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var string1 = "abcdefghijklmnopqrstuvwxyz"; string1.split(""); var fontsize = 20; columns = canvas.width / fontsize; var drop = []; for (var x = 0; x < columns; x++) { drop[x] = 0; } function drap() { ctx.fillStyle = "rgba(0,0,0,0.07)"; ctx.fillRect(0, 0, canvas.width, canvas.height); //fillRect(x,y,width,height),x座標、y座標、width寬、height高 ctx.fillStyle = "#0F0"; ctx.font = fontsize + "px arial"; for (var i = 0; i < drop.length; i++) { var text1 = string1[Math.floor(Math.random() * string1.length)]; ctx.fillText(text1, i * fontsize, drop[i] * fontsize); //fillText(text,x,y,maxWidth),text畫布文字、開始繪製文字的 x 座標位置、開始繪製文字的 y 座標位置、可選。允許的最大文字寬度，以畫素計 drop[i]++; if (drop[i] * fontsize > canvas.height && Math.random() > 0.9) { //90%的機率掉落 drop[i] = 0; } } } setInterval(drap, 20); </script> </body> </html>