您的位置：首页 > Web前端 > HTML5

HTML5+CSS3实现数字滚动特效，可做屏保。

2019-04-01 18:10 369 查看

复制代码，粘贴到txt文档，修改txt为html，用浏览器打开按F11。

<!DOCTYPE html>
<html>
<head>
<title>number falls</title>
</head>
<body>
<canvas id="canvas"></canvas>
<style type="text/css">
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var texts = '0123456789'.split('');
var fontSize = 12;

canvas.height = window.screen.height;
canvas.width = window.screen.width;

var columns = canvas.width/fontSize;
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, canvas.width, canvas.height);
//文字
ctx.fillStyle = '#0F0';
ctx.font = fontSize + 'px arial';

//逐行输出文字
for (var i = 0; i < drops.length; i++) {
//texts中随机取一个数
var text = texts[Math.floor(Math.random() * texts.length)];

ctx.fillText(text, i * fontSize, drops[i] * fontSize);
if (drops[i] * fontSize > canvas.height || Math.random() > 0.95) {
drops[i] = 0;
}
drops[i]++;
}
}
setInterval(draw, 33);
</script>
</body>
<html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航