一个小屏保
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个小屏保相关的知识，希望对你有一定的参考价值。
今天看到了一个效果，觉得挺漂亮，于是学着写了写，总算出来了，一个小效果就这么费力，看来还得好好努力了。
下面是代码。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0; padding:0; }
canvas{background:#000}
</style>
<script>
function rnd(m,n){
return Math.floor(Math.random()*(n-m)+m);
}
window.onload=function(){
var oC=document.getElementsByTagName(‘canvas‘)[0];
var gd=oC.getContext(‘2d‘);
oC.height = window.screen.height;
oC.width = window.screen.width;
var arr = []
var num =0;
for (i = 0; i < 200; i++){
arr[i]=1;
}
function step() {
gd.fillStyle = ‘rgba(0,0,0,0.05)‘;
gd.fillRect(0, 0, oC.width, oC.height);
gd.fillStyle = ‘rgb(‘+rnd(0,256)+‘,‘+rnd(0,256)+‘,‘+rnd(0,256)+‘)‘;
for(var i=0; i<arr.length; i++){
gd.fillText(num,i*10,arr[i]);
if(num==0){
num=1;
}else{
num=0;
}
if(arr[i]>750+Math.random()*10000){
arr[i]=0;
}else{
arr[i]+=10;
}
}
}
setInterval(step, 30)
}
</script>
</head>
<body>
<canvas></canvas>
</body>
</html>
以上是关于一个小屏保的主要内容，如果未能解决你的问题，请参考以下文章