JavaScript 字符雨
来源:互联网 发布:proutes仿真软件接地 编辑:程序博客网 时间:2024/05/16 23:55
<html> <head> <meta charset="utf8"/> <title>字符雨</title> <style> body { color:white; background-color:black; overflow:hidden; } </style> </head> <body onresize="init()"> <div> 帧率(fps): <input id="fpsNum" type="number" min="1" max="35" step="2" value="24" /> <input id="switchBtn" type="button" value="stop" onclick="switchState()" /> </div> <canvas id="canvas">您的浏览器不支持canvas</canvas> <script> var c = document.getElementById("canvas"); var fpsNum = document.getElementById("fpsNum"); var switchBtn = document.getElementById("switchBtn"); var ctx = c.getContext("2d"); //动画是否已经开始 var isStart = true; //循环调用器id var intervalId = 0; //每次循环绘制一个0.1透明度的蒙版,让以前绘制的文字留下一段阴影效果 var clearColor = "rgba(0,0,0,.1)"; //文字大小 var fontSize = 20; //文字 var font = fontSize + "px arial"; //文字颜色 var fontColor = "#0f0" //存储每列的起始坐标 var drops = []; //重启程序 function init() { c.width = document.body.offsetWidth; c.height = document.body.offsetHeight; //文字的列数 var columns = Math.floor(c.width / fontSize); //原来的列数 var len = drops.length; if(len < columns) { for(var i=len; i<columns; i++) { //初始化随机的列坐标 drops.push(Math.floor(Math.random() * c.height)); } } else { drops.slice(columns, len - columns); } //如果当前已经正在绘制,则需要先终止绘制再重启绘制 if(isStart) { switchState(); } switchState(); } //绘制 function draw() { ctx.save(); ctx.translate(c.width, 0); ctx.scale(-1, 1); ctx.font = font; ctx.fillStyle = fontColor; drops.map(function(currentValue, index) { //接受一个或多个unicode值,然后返回一个字符串 var text = String.fromCharCode(65 + Math.round(Math.random() * 33)); //var text = Math.floor(Math.random() * 2); var x = index * fontSize; var y = currentValue * fontSize; ctx.fillText(text, x, y); if(y > c.height * 0.6 && Math.random() > 0.85) { drops[index] = 0; } drops[index]++; }); ctx.restore(); ctx.fillStyle = clearColor; ctx.fillRect(0, 0, c.width, c.height); } //切换当前状态(开始 或 停止) function switchState() { isStart = !isStart; if(isStart) { switchBtn.value = "stop"; intervalId = setInterval(draw, 1000/fpsNum.value); } else { switchBtn.value = "start"; clearInterval(intervalId); } } init(); </script> </body></html>
2 0
- JavaScript 字符雨
- 用javascript分割字符
- JavaScript 特殊字符
- JavaScript字符编码规则
- JavaScript 特殊字符
- JavaScript中的连字符
- Javascript验证非法字符
- javascript 屏蔽特殊字符
- Javascript URL 转义字符
- javascript 转义字符
- Javascript 中文转义字符
- JavaScript 特殊字符
- HTML JavaScript 转义字符
- javascript字符编码、转义
- javaScript如何替换字符
- JavaScript 特殊字符
- javascript判断字符长度
- JavaScript过滤特殊字符
- Linux(ElementaryOS) 实用命令
- hdu 2034 无聊水一把map
- python的list求和与求积
- 深入理解c/c++之从编译器角度理解变量和指针
- 215. Kth Largest Element in an Array**
- JavaScript 字符雨
- Ubuntu install MySQL-python
- 使用Orcad TCL脚本放置阵列元件
- JavaWeb(4)——SVN服务器配置
- solrJ客户端的使用
- ssh连接时去掉“The authenticity of host xx can’t be established”解决方法
- 自定义View(一)---View的基础概念、工作流程以及生命周期的理解
- Vue学习笔记(4)关于class和style绑定
- Windows核心编程 第26章 窗口消 息