【特效】canvas黑客帝国特效_H5之家 - 中国HTML5教程资源分享第一站

哈喽大家好，今晚给大家带来一个很棒的特效—–黑客帝国特效，如图：

canvas特效

代码不是很多，相信你看一下就会理解了。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta 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 > 你的浏览器不支持，请你更换浏览器 </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>