canvas黑客帝国特效

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="Author" content="aoliann">
<title>un</title>
<style type="text/css">
*{margin:0;padding:0;}
html,body{height:100%;overflow: hidden;}
canvas{display: block;background: #000;}
</style>
</head>
<body>
<canvas id='canvas' >
 你的浏览器不支持,请你更换浏览器
</canvas>
<script type="text/javascript">
var can = document.getElementById("canvas");
var cxt = can.getContext('2d'); //设置绘图环境
var w = canvas.width= window.screen.width;
var h = canvas.height = window.screen.height;

var words = Array(256).join('1').split('');
var text = '';
var x = 0;
function draw(){
     cxt.fillStyle = 'rgba(0,0,0,0.05)';
     cxt.fillRect(0,0,w,h);
     cxt.fillStyle = color();
    words.map(function(y,n){
     text = String.fromCharCode(65+Math.ceil(Math.random()*57));
     x = n*10;
    cxt.fillText(text,x,y);
    words[n] = y>(768 + Math.random()*484) ?0:y+10;
    });
}
setInterval(draw,30);

function color(){
    var r = Math.floor(Math.random()*256);
    var g = Math.floor(Math.random()*256);
    var b = Math.floor(Math.random()*256);

   return "rgb("+r+","+g+","+b+")"

}
</script>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » canvas黑客帝国特效

赞 (1)
分享到:更多 ()

发表评论 0