码迷,mamicode.com
首页 > 其他好文 > 详细

一个小屏保

时间:2016-11-07 07:42:46      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:return   getc   can   type   dom   doc   今天   canvas   nload   

  今天看到了一个效果,觉得挺漂亮,于是学着写了写,总算出来了,一个小效果就这么费力,看来还得好好努力了。

  下面是代码。

<!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>

一个小屏保

标签:return   getc   can   type   dom   doc   今天   canvas   nload   

原文地址:http://www.cnblogs.com/xwwshr/p/6037059.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!