0 喜欢

【canvas动画】黑客帝国代码雨

admin
admin
2020-11-05 23:00:01 阅读 94

效果展示

下载.png

预览地址

黑客帝国代码雨

html代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html, body, canvas { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; } canvas { background: #000; } </style> </head> <body> <canvas id="mycan"> YOUR BROWSER CANNOT SUPPORT CANVAS </canvas> <script> var can = document.getElementById('mycan') var ctx = can.getContext('2d') can.width = window.innerWidth can.height = window.innerHeight function init(ctx, txt) { const FONTSIZE = 20 const FONTCOLOR = 'green' const MASKCOLOR = 'rgba(0, 0, 0, 0.05)' const W = ctx.canvas.width const H = ctx.canvas.height var tIndex = 0 var tLen = txt.length var arr = [] function genRandomY() { return Math.round(Math.random() * H * 0.5) + FONTSIZE } for (let i = 0; i < W; i += FONTSIZE) { arr.push({x: i, y: genRandomY()}) } function anime() { var t = txt[tIndex++ % tLen] ctx.fillStyle = FONTCOLOR arr.forEach(function(ele) { ctx.fillText(t, ele.x, ele.y) ele.y += FONTSIZE if (ele.y > H) ele.y = genRandomY() }) ctx.fillStyle = MASKCOLOR ctx.rect(0, 0, W, H) ctx.fill() requestAnimationFrame(anime) } anime() } init(ctx, '爱前端IFRONT.NET') </script> </body> </html>

关于作者
admin
admin
admin@ifront.net
 获得点赞 37
 文章阅读量 8901