前端ABC<!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黑客帝国特效