<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框架写，直接调用就可以了
网址---附上图片--知道老是把链接判定为违规----
效果---
一、web应用更容易开发HTML5的规范都是基于用户优先准则来编写的，贴合开发者的编码习惯，语法限制不严，代码也更为精简，更易于阅读。
二、功能强大，用户体验佳
HTML5视频播放起来更流畅清晰，也更省电；HTML5游戏小巧流畅，画面质量高，操作易上手；HTML5广告摆脱了以前网页广告的悬浮、滚动和弹出，广告更容易让用户接受。
三、搜索引擎友好，网站流量大
HTML5的代码是贴合用户有明确释义的，不仅对开发者有利，搜索引擎也更容易识别到网页上的内容，让网站获得更多流量。
四、摆脱平台依赖，兼容性好
对开发者来说，HTML5可以做到跨平台，多数核心代码不用重写，能应用于包括移动应用、移动网站、PC网站、各种浏览器插件。对用户来说，不用下载APP，直接打开浏览器就能访问你的应用，避开了了各类应用商店的审核程序。
五、实时更新，维护更简单
游戏客户端每次都要更新，很麻烦。可是更新HTML5游戏就好像更新页面一样，是马上的、即时的更新。
六、使用门槛低，容易推广
HTML5 应用导流入口很多，超级 App (如微信朋友圈)、搜索引擎、应用市场、浏览器……而原生 App 的流量入口只有应用市场。一些风靡朋友圈的小游戏，无需下载，点开就玩，如果换成APP，推广效果就没那么好了。
七、更精美的动画效果，更低的开发成本
应用HTML5技术做出来的网页能给人眼前一亮的感觉，这些动画是基于html5标签和CSS3样式共同实现的效果，HTML5技术还支持自适应，能做到“一次设计，普遍适用。”不用单独开发手机网站，为企业降低了开发成本。
