當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
黑客帝国雨效果JS
黑客帝國雨效果JS。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}body{overflow: hidden;}canvas{background: #111;}</style> </head> <body><canvas id="canvas"></canvas><script>var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");var W = window.innerWidth;var H = window.innerHeight;canvas.width = W;canvas.height = H;var fontSize = 16;//計算列var colunm = Math.floor(W/fontSize);//console.log(colunm);//存儲Y值var drops = [];for(var i = 0;i<colunm;i++){drops[i] = 1;}//console.log(...drops)var str = "Welcome JavaScript";//let tempRandom = Math.random()*str.length;//console.log(tempRandom,Math.floor(tempRandom))//把文字畫到屏幕上function draw(){context.fillStyle = "rgba(0,0,0,0.05)";//文字隨機出現的背景 context.fillRect( 0, 0, W, H);context.font = "700 " + fontSize + "px ARIAL";context.fillStyle = "#00cc33";//context.fillStyle = randColor();//console.log("你好");for(var i = 0; i<colunm; i++){//讓字符串中的內容隨機出現var index = Math.floor(Math.random()*str.length);var x = i*fontSize;var y = drops[i]*fontSize;context.fillText(str[index],x,y);console.log(str[index],x,y);if(y>=canvas.height && Math.random()>0.99){drops[i] = 0;}drops[i]++;}}function randColor(){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+")";}draw();setInterval(draw,20);</script> </body> </html>效果截圖：
?
轉載于:https://www.cnblogs.com/liubeimeng/p/10618388.html
總結
- 上一篇： SQL注入——报错注入
- 下一篇： javascript生成指定范围的随机整