简单JS打造酷炫代码雨（黑客高逼格）
电影黑客帝国有个代码雨效果，满满的既视感，身为程序猿的你羡慕吗？只要很简单的HTML+JavaScript就能实现，甚至不需要懂任何技术。这篇文章主要介绍了简单JS打造酷炫代码雨（黑客高逼格）,需要的朋友可以参考下
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>流星雨</title>
<meta name="keywords" content="关键词，关键字">
<meta name="description" content="描述信息">
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!--
<canvas>画布 画板 画画的本子
-->
<canvas width=400 height=400 style="background:#000000;" id="canvas"></canvas>
<script>
//获取画板
//doccument 当前文档
//getElement 获取一个标签
//ById 通过Id名称的方式
//var 声明一片空间
//var canvas 声明一片空间的名字叫做canvas
var canvas = document.getElementById("canvas");
//获取画板权限 上下文
var ctx = canvas.getContext("2d");
//让画板的大小等于屏幕的大小
/*
思路：
1.获取屏幕对象
2.获取屏幕的尺寸
3.屏幕的尺寸赋值给画板
*/
//获取屏幕对象
var s = window.screen;
//获取屏幕的宽度和高度
var w = s.width;
var h = s.height;
//设置画板的大小
canvas.width = w;
canvas.height = h;
//设置文字大小
var fontSize = 14;
//计算一行有多少个文字 取整数 向下取整
var clos = Math.floor(w/fontSize);
//思考每一个字的坐标
//创建数组把clos 个 0 （y坐标存储起来）
var drops = [];
var str = "qwertyuiopasdfghjklzxcvbnm";
//往数组里面添加 clos 个 0
for(var i = 0;i<clos;i++) {
drops.push(0);
}
//绘制文字
function drawString() {
//给矩形设置填充色
ctx.fillStyle="rgba(0,0,0,0.05)"
//绘制一个矩形
ctx.fillRect(0,0,w,h);
//添加文字样式
ctx.font = "600 "+fontSize+"px 微软雅黑";
//设置文字颜色
ctx.fillStyle = "#00ff00";
for(var i = 0;i<clos;i++) {
//x坐标
var x = i*fontSize;
//y坐标
var y = drops[i]*fontSize;
//设置绘制文字
ctx.fillText(str[Math.floor(Math.random()*str.length)],x,y);
if(y>h&&Math.random()>0.99){
drops[i] = 0;
}
drops[i]++;
}
}
//定义一个定时器，每隔30毫秒执行一次
setInterval(drawString,30);
</script>
</body>
</html>
到此这篇关于简单JS打造酷炫代码雨（黑客高逼格）的文章就介绍到这了,更多相关JS代码雨内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
HTML+JS实现“代码雨”效果源码（黑客帝国文字下落效果）
我们先看看HTML+JS实现"代码雨"的最终效果 1.绿色: 2.彩色: 3.背景色: 4.绿色逐渐变浅: 源代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Code -by ZhenYu.Sha</title>
-
利用JS打造黑客代码雨效果
目录 演示 技术栈 源码 画布 js样式设置 演示 技术栈 js实战我们也写过很多了,其中每次几乎都用到画布,大家知道它的重要性了吧.今天依旧用到它了.不过我们讲过它的用法就不多说了. 这次我们说一下window.onload window.onload() 方法用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法. window.onload() 通常用于 元素,在页面完全载入后(包括图片.css文件等等)执行脚本代码. 只有一个要执行的函数语法: window
-
JS实现代码雨特效
本文实例为大家分享了JS实现代码雨特效的具体代码,供大家参考,具体内容如下 html代码 <canvas id="code_rain_canvas" width="1440" height="900"></canvas> js 代码 window.onload = function() { //获取画布对象 var canvas = document.getElementById(&qu
-
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
先看看JS+CSS+HTML实现"代码雨"类似黑客帝国文字下落最终效果: HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/ok.css" rel="external nofo
-
简单JS打造酷炫代码雨（黑客高逼格）
电影黑客帝国有个代码雨效果,满满的既视感,身为程序猿的你羡慕吗?只要很简单的HTML+JavaScript就能实现,甚至不需要懂任何技术.这篇文章主要介绍了简单JS打造酷炫代码雨(黑客高逼格),需要的朋友可以参考下 <!doctype html> <html> <head> <meta charset="utf-8" /> <title>流星雨</title> <meta name="keyword
-
原生JS实现酷炫分页效果
本文实例为大家分享一个如下效果的JS分页特效,是不是很酷炫. 以下是代码实现: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现酷炫分页</title> <style> * { margin: 0; padd
-
js实现酷炫倒计时动画
本文实例为大家分享了js实现酷炫倒计时动画的具体代码,供大家参考,具体内容如下 前段时间和朋友去音乐餐厅吃饭,中间有个活动,然后看到他们软件公众号H5有个活动开始的倒计时的动画效果,于是想了下实现思路. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js实现酷炫倒计时动画效果</title> <style&g
-
打造酷炫的AndroidStudio插件
前面几篇文章学习了AndroidStudio插件的基础后,这篇文章打算开发一个酷炫一点的插件.因为会用到前面的基础,所以如果没有看前面系列文章的话,请先返回.当然,如果有基础的可以忽略之.先看看本文实现的最终效果如下(好吧,很多人说看的眼花): 虽然并没有什么实际用途,但是作为学习插件开发感觉挺有意思的. 1. 基本思路 基本思路可以归结如下几步: 1).通过Editor对象可以拿到封装代码编辑框的JComponent对象,即调用如下函数:JComponent component = edito
-
canvas+gif.js打造自己的数字雨头像的示例代码
前天 是1024程序员节,不知道各位看官过的怎么样.既然是过节,就要有个过节的样子,比方说,换个头像
-
基于RxJava实现酷炫启动页
前言 RxJava 在 GitHub 主页上的自我介绍是 "a library for composing asynchronous and event-based programs using observable sequences for the Java VM"(一个在 Java VM 上使用可观测的序列来组成异步的.基于事件的程序的库).这就是 RxJava ,概括得非常精准. 之前注意到coding APP启动页很是酷炫,今天我们使用RxJava和属性动画模仿实现其效果.
-
使用canvas制作炫酷黑客帝国数字雨背景html+css+js
目录 制作: 1.定义canvas标签: 2.开始js部分,先定义变量: 3.初始化字符串数组,先给每条字符串位置,字符先不给: 4.绘制每条字符串: 5.更新字符串: 6.设置动画过程: 7.在窗口大小改变时,设置canvas画布能实时铺满屏幕: 完整代码: 制作: 1.定义canvas标签: <canvas id="canvas"></canvas> 2.开始js部分,先定义变量: /* 获取画布 */ var canvas = document.query
-
JS+CSS3制作炫酷的弹窗效果
昨天在家看电视时,退出的时候发现了一个弹窗效果,整个背景模糊,觉得这样的效果好炫,要比纯色加透明度高大上好多,连续试了几个界面,最终确定效果由css实现的,于是今天一大早来到公司便赶紧搜索了一下,虽然兼容性奇差,但是一个css属性就可以搞定.瞬间感觉自己知道的真是太少了~~ 首先回忆一下弹窗的实现,一般我们分为两层,弹出窗口层(popus)和遮罩层(mask),通常情况下我习惯就这两元素全部设成fixed定位,具体和absolute区别一试便知.对于mask层自不用多少,我们如下给他设置属性,让