HTML5模仿黑客帝国文字矩阵特效，怎么样可以确定文字显示

html-css05

HTML5模仿黑客帝国文字矩阵特效，怎么样可以确定文字显示,第1张

<!DOCTYPE html>

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

亲，请使用SUI3框架写，直接调用就可以了

网址---附上图片--知道老是把链接判定为违规----

效果---