黑客帝国动态特效代码
生活随笔
收集整理的這篇文章主要介紹了
黑客帝国动态特效代码
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
黑客帝國動態(tài)特效代碼（可以用自己想用的那些字來形成向下的流動型光柱）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><style>/*basic reset*/ * {margin: 0; padding: 0;} /*adding a black bg to the body to make things clearer*/ body {background: black;} canvas {display: block;}</style></HEAD><BODY><canvas id="c"></canvas><script type="text/javascript" src="cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script>var c = document.getElementById("c"); var ctx = c.getContext("2d");//making the canvas full screen c.height = window.innerHeight; c.width = window.innerWidth;//chinese characters - taken from the unicode charset var chinese = "田由甲申甴電甶男甸甹町畫甼甽甾甿畀畁畂畃畄暢畆畇畈畉畊畋界畍畎畏畐畑"; //converting the string into an array of single characters chinese = chinese.split("");var font_size = 10; var columns = c.width/font_size; //number of columns for the rain //an array of drops - one per column var drops = []; //x below is the x coordinate //1 = y co-ordinate of the drop(same for every drop initially) for(var x = 0; x < columns; x++)drops[x] = 1; //drawing the characters function draw() {//Black BG for the canvas//translucent BG to show trailctx.fillStyle = "rgba(0, 0, 0, 0.05)";ctx.fillRect(0, 0, c.width, c.height);ctx.fillStyle = "#0F0"; //green textctx.font = font_size + "px arial";//looping over dropsfor(var i = 0; i < drops.length; i++){//a random chinese character to printvar text = chinese[Math.floor(Math.random()*chinese.length)];//x = i*font_size, y = value of drops[i]*font_sizectx.fillText(text, i*font_size, drops[i]*font_size);//sending the drop back to the top randomly after it has crossed the screen//adding a randomness to the reset to make the drops scattered on the Y axisif(drops[i]*font_size > c.height && Math.random() > 0.975)drops[i] = 0;//incrementing Y coordinatedrops[i]++;} }setInterval(draw, 33);</script></BODY> </HTML>總結(jié)
以上是生活随笔為你收集整理的黑客帝国动态特效代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 人口增长模型——基于matlab语言
- 下一篇： 网关