canvas教程

【特效】canvas黑客帝国特效

字号+ 作者:H5之家 来源:H5之家 2017-08-18 12:03 我要评论( )

哈喽大家好,今晚给大家带来一个很棒的特效-----黑客帝国特效,如图:

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

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>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • canvas实现百度地图个性化底图绘制

    canvas实现百度地图个性化底图绘制

    2017-08-18 13:03

  • 【canvas学习笔记4】绘制文字

    【canvas学习笔记4】绘制文字

    2017-08-18 08:00

  • 【canvas学习笔记3】样式和颜色

    【canvas学习笔记3】样式和颜色

    2017-08-17 18:07

  • canvas requestAnimationFrame 动画

    canvas requestAnimationFrame 动画

    2017-08-16 13:01

网友点评