<html>
<head>
<title>黑客帝国效果</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')
canvas.height = window.innerHeight
canvas.width = window.innerWidth
var texts = '0123456789'.split('')
var fontSize = 16
var columns = canvas.width/fontSize// 用于计算输出文字时坐标，所以长度即为列数
var drops = []//初始值
for(var x = 0x <columnsx++){
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 = 0i <drops.lengthi++){
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>
1.JavaScript转译：使用JavaScript转译工具可以轻松地将任何文本转换成看起来很酷的代码，比如：可以将“Hello World”转换为“\u0048 \u0065 \u006C \u006C \u006F \u0020 \u0057 \u006F \u0072 \u006C \u0064”。2.HTML5和CSS3：用HTML5和CSS3也可以实现非常酷炫的代码，利用CSS3的新特性，可以轻松地实现漂亮的动画效果，如使用CSS3的旋转效果、缩放效果、颜色渐变效果等。
3.Canvas画布：使用Canvas画布，可以使用JavaScript绘制任何想要的图形，把酷炫的图形加入到页面中，就迎刃而解了。
<!--使用position:absolutez-index:100--><canvas id="q"></canvas>
<div id="main" style=" position:absolutez-index:100top:10pxwidth:960pxheight:400pxbackground:red">123</div>
<script type="text/javascript">
var s = window.screen
var width = q.width = s.width
var height = q.height = s.height
var letters = Array(256).join(1).split('')
var _div=document.getElementById("main")
_div.style.left=(width-960)/2+"px"//给主页面left定位
var draw = function () {
q.getContext('2d').fillStyle='rgba(0,0,0,.05)'
q.getContext('2d').fillRect(0,0,width,height)
q.getContext('2d').fillStyle='#0F0'
letters.map(function(y_pos, index){
text = String.fromCharCode(3e4+Math.random()*33)
x_pos = index * 10
q.getContext('2d').fillText(text, x_pos, y_pos)
letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10
})
}
setInterval(draw, 33)
</script>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）