酷炫黑客电脑数字屏
2022年06月04日
投稿作者:
围观人数:1981
所用到的知识点
1.canvas
<canvas> 标签通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像)。
<canvas> 标签只是图形容器,必须使用脚本来绘制图形。
2.window尺寸
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight – 浏览器窗口的内部高度
window.innerWidth – 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
3.填充方法:
fillStyle:设置或返回用于填充绘画的颜色、渐变或模式。
fillRect:绘制”被填充”的矩形。
fillText:在画布上绘制”被填充的”文本。
4.Math数学函数
floor(x):对 x 进行下舍入。
setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式。该方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 该方法返回的 ID 值可用作 clearInterval() 方法的参数。
clearInterval():取消由 setInterval() 设置的 timeout。Markup
<html> <head> <title>Digital Rain</title> <meta charset="UTF-8"> <style> * {margin: 0; padding: 0;} body {background: #fff;} canvas {display: block;}</style> </head> <body> <canvas id="ad" height="100%" width="100%"></canvas> <script> var ad = document.getElementById("ad"); var ctx = ad.getContext("2d"); ad.height = window.innerHeight; ad.width = window.innerWidth; var chinese = "www.lvxiazi.cn"; //可以修改下落文字 chinese = chinese.split(""); var font_size = 12; //可以修改文字大小 var columns = ad.width / font_size; var drops = []; for (var x = 0; x < columns; x++) drops[x] = 1; function draw() { ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; ctx.fillRect(0, 0, ad.width, ad.height); ctx.fillStyle = "#0F0";//可以修改文字颜色 ctx.font = font_size + "px arial"; for (var i = 0; i < drops.length; i++) { var text = chinese[Math.floor(Math.random() * chinese.length)]; ctx.fillText(text, i * font_size, drops[i] * font_size); if (drops[i] * font_size > ad.height && Math.random() > 0.975) drops[i] = 0; drops[i]++; } } setInterval(draw, 30); </script> </body> </html>
标签
版权说明
免责声明:本文文章内容由导航天下发布,但不代表本站的观点和立场,具体内容可自行甄别.