黑客帝国雨效果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>

效果截图:

黑客帝国雨效果JS的更多相关文章

  1. theMatrix代码雨效果

    做了一个代码雨效果放在个人主页:  https://lanleilin.github.io/lanGallery/index.html 代码: <!DOCTYPE html> <ht ...

  2. 页面常见效果js实现

    2015.12.2 页面常见效果js实现 [有没有觉得很坑,[笑哭,邮箱写上]] 复习: Js内置对象: 1.浏览器对象 window document history location event  ...

  3. css3 圣诞红包雨效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. 右上角鼠标滑过展开收缩动画效果js代码的演示页面

    http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...

  5. js仿黑客帝国文字数字雨效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. JQuery实现——黑客帝国代码雨效果

    效果如你所见就是本页面上方那样的效果 实现方法来自一个印度小伙纸,学习完我也没总结一下,今儿个补上 如何实现,大家右键查看源码复制即可,不过学习的过程还是要总结总结. 下面通过另外两个小例子,一步一步 ...

  7. JAVA实现黑客帝国代码雨效果

    import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import j ...

  8. 三种比较好玩的黑客效果JS代码(摘取)

    <html> <head> <title>The Matrix</title> <script src="http://ajax.goo ...

  9. 最牛的打字效果JS插件 typing.js

    最新在做公司的一个项目,需要实现一个敲打代码的动画效果,粗意味比较简单,果断自己直接开写,写着写着发现是一个坑.需要支持语法高亮,并不能直接简单的用setTimeout来动态附件innerHTML.苦 ...

随机推荐

  1. aspnetcore 2.1 发布到树莓派3linux的艰辛路程

    发布至docker for windows. 提示: image operating system "windows" cannot be used on this platfor ...

  2. tkinter事件高级用法实例

    from tkinter import * import threading, time trace = 0 class CanvasEventsDemo: def __init__(self, pa ...

  3. spring源码-aop动态代理-5.3

    一.动态代理,这是一个很强大的东西哦.研发过程中我们会常用很多业务类,但是存在一个问题.如何在不修改源码逻辑的情况下,加入自己的相关逻辑.比如异常处理,日志记录等! 二.Java动态代理的两种方式JD ...

  4. dsp6657的helloworld例程测试-第一篇

    环境搭建可以参考http://blog.sina.com.cn/s/blog_ed2e19900102xi2j.html 1. 先从mcsdk导入工程,helloworld例程 2. 提示有错误,估计 ...

  5. TPO-16 C2 Reschedule the medieval history test

    TPO-16 C2 Reschedule the medieval history test 第 1 段 1.Listen to a conversation between a Professor ...

  6. Node开发项目管理工具 Grunt 对比 Gulp

    转自Gulp vs Grunt 1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Java项目而出现的Mav ...

  7. 使用JS验证文件类型

    项目中涉及到这一需求,在此贴出代码分享给大家, 有2中方式,一种是input中使用accept 方式 一种是使用js正则表达式判断,个人推荐使用js正则表达式,因为accept 有的浏览器并不支持,而 ...

  8. lxd&openstack-lxd源码剖析

    lxd:https://linuxcontainers.org/lxd/,目标是融入到openstack体系被管理,像虚拟机一样被管理使用.从如下图可知,并非走的是libvirt-lxc路线,而是no ...

  9. 十大经典排序算法总结 (Python)

    作业部落:https://www.zybuluo.com/listenviolet/note/1399285 以上链接是自己在作业部落编辑的排序算法总结- Github: https://github ...

  10. loadrunner--基础2

    LR11-03 一.并发测试(n VU) 1.并发测试两个条件 1)脚本中要有 集合点(并发点) 2)控制台中要设置并发策略(选择第一项,所有虚拟用户到达集合点后释放) 集合点: 5个线程,代表5个V ...