html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 黑客帝国字母雨 </title>
- <style>
- body {
- margin: 0;
- padding: 0;
- }
- </style>
- <script>
- window.onload = function () {
- var canv = document.getElementById('canvas');
- var cw = document.documentElement.clientWidth;
- var ch = document.documentElement.clientHeight;
- canv.width = cw;
- canv.height = ch;
- var bc = 120;
- var bcIndex = 5;
- var shadowBlur = 2;
- var sbIndex = 0.4;
- var fh = 110;
- var ctx = canv.getContext('2d');
- var fontSize = 12;
- var columns = Math.ceil(cw / fontSize);// 计算适合的列数
- var arr = [];
- var texts = "@#$%&?<>{}[]()~!ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ0123456789".split("");// 字符源
- for (var i = 0; i <columns; i++) {
- arr[i] = 1;
- }
- var shape = [];
- for (var i = 0; i < 80; i++) {
- var w = Math.random() * 2.2+ 1.2;
- var r = Math.floor(Math.random() * 170 + 80);
- var a = Math.random() * 361;
- var b = Math.floor(Math.random() * 2 + 1);
- var s = 0.8;
- shape.push({w: w, r: r, a: a, b: b, s: s});
- }
- function draw() {
- ctx.fillStyle = "rgba(0,0,0,0.08)";
- ctx.fillRect(0, 0, canv.width, canv.height);
- ctx.fillStyle = "#12ee46";
- ctx.font = fontSize + "px Arial";
- ctx.textAlign = 'center';
- ctx.textBaseline = 'middle';
- for (var i = 0; i < arr.length; i++) {
- var text = texts[Math.floor(Math.random() * texts.length)];
- ctx.fillText(text, i * fontSize, arr[i] * fontSize);
- if (arr[i] * fontSize> ch || Math.random()> 0.95) {
- arr[i] = 0;
- }
- arr[i]++;
- }
- drawArc();
- drawText();
- window.onresize = function () {
- cw = document.documentElement.clientWidth;
- ch = document.documentElement.clientHeight;
- canv.width = cw;
- canv.height = ch;
- columns = Math.ceil(cw / fontSize);
- arr = [];
- for (var i = 0; i <columns; i++) {
- arr[i] = 1;
- }
- }
- }
- function drawArc() {
- var sl = shape.length;
- for (var i = 0; i < sl; i++) {
- var temp = shape[i];
- var x = cw / 2 + (temp.r * (Math.cos(temp.a * Math.PI / 180)));
- var y = ch / 2 + 40 + (temp.r * (Math.sin(temp.a * Math.PI / 180)));
- if (temp.b == 2) {
- temp.a += temp.s;
- } else {
- temp.a -= temp.s;
- }
- if (temp.a> 360) {
- temp.a = 0;
- }
- ctx.save();
- ctx.fillStyle = 'rgba(0,' + (255 - bc) + ',0,0.3)';
- ctx.beginPath();
- ctx.moveTo(x, y);
- ctx.arc(x, y, temp.w, 0, 360 * Math.PI / 180, false);
- ctx.fill();
- ctx.closePath();
- ctx.restore();
- }
- }
- function drawText() {
- ctx.save();
- var title = "HACKER";
- var title2 = "EMPIRE";
- ctx.fillStyle = "rgba(0,24,0,1)";
- ctx.font = fh + "px Arial";
- ctx.textAlign = 'center';
- ctx.textBaseline = 'middle';
- ctx.fontWeight = 900;
- ctx.shadowOffsetY = 0;
- // 字体阴影宽度变化
- shadowBlur += sbIndex;
- ctx.shadowBlur = shadowBlur;
- if (shadowBlur>= 14) {
- sbIndex *= -1
- } else if (shadowBlur <= 0) {
- sbIndex *= -1;
- }
- // 字体阴影颜色变化
- bc += bcIndex;
- ctx.shadowColor = 'rgba(0,' + bc + ',0,1)';
- if (bc>= 255) {
- bcIndex *= -1;
- } else if (bc <= 45) {
- bcIndex *= -1;
- }
- ctx.fillText(title, cw / 2, ch / 2 + 20);
- ctx.font = 80 + "px Arial";
- ctx.fillText(title2, cw / 2, ch / 2 + 120);
- ctx.restore();
- }
- setInterval(draw, 90);
- }
- </script>
- </head>
- <body>
- <canvas id="canvas"></canvas>
- </body>
- </html>
来源: http://www.qdfuns.com/article/37060/dfeb26a836c734f4fc0dd872d7e60663.html