原

代码雨

5087人阅读 2019/4/10 16:26 总访问：3213232 评论：2 收藏：1 手机

分类: 前端

喜欢的拿起去试一下嘛！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
/*#canvas{
            display: block;
            border: 1px solid black;
            margin: 50px auto;
             宽高在标签上设置 
        }*/
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
document.body.parentNode.style.overflow = "hidden";
var oCanvas = document.querySelector("#canvas"),
// 获取一下canvas里面所有api（方法）
oCtx = oCanvas.getContext("2d");
//1获取可视区域的宽高 附值给画布
var oWidth = window.innerWidth,
oHeight = window.innerHeight;
oCanvas.width = oWidth,
oCanvas.height = oHeight;
//2准备下落的字母
var thischar = 'QWERTYUIOPASDFGHJKKLZXCVBNM';
//3设置文字大小 
var fontSize = 24;
//4一行多少个
var num = Math.floor(oWidth/fontSize);
//用一个数组去存放字母的y坐标
var drops =[];
for (let index = 0; index < num; index++) {
drops.push(0);
}
function draw() {
oCtx.fillStyle = "rgba(0,0,0,0.1)";
//设置背景颜色
oCtx.fillRect(0,0,oWidth,oHeight);
oCtx.fillStyle="green";
oCtx.font = fontSize+"px";
//造字母
for(var i = 0;i <num;i++){
var oX = i*fontSize,
oY = drops[i]*fontSize;
//绘制坐标
oCtx.fillText(thischar[Math.floor(Math.random()*thischar.length)],oX,oY);
if (oY>oHeight&&Math.random()>0.95) {
drops[i]=0;
}
drops[i]++;

}
}
setInterval(() => {
draw();
}, 50); //每隔50毫秒 去执行一次 draw这个函数
</script>
</body>
</html>
<!-- 
    基础
       //线条开始的坐标（x,y）
            // oCtx.moveTo(20,20);
            // //线条终止的地方
            // oCtx.lineTo(200,200);
            // //
            // oCtx.lineTo(400,20);
            // oCtx.lineTo(20,20);
            // //填充颜色
            // oCtx.fillStyle="lightblue";
            // oCtx.fill();
            // //画到画布上去
            // oCtx.stroke();
 -->

下面是做的一个简单的登录页面，做得不是很好呀

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<style>
*{
padding: 0;
margin: 0;
font-family: "montserrat",sans-serif;
}
/*#canvas{
            display: block;
            border: 1px solid black;
            margin: 50px auto;
             宽高在标签上设置 
        }*/
#mytoby {
position: absolute;
width: 350px;
height: 400px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: rgb(73, 73, 66);
opacity: .7;
border-radius: 5px;
}
.mytoby-form{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.mytoby-form h1{
font-weight: 400;
margin-top: 0;
color: white;
}
.txtb{
display: block;
box-sizing: border-box;
border: 1px solid white;
width: 240px;
padding: 10px;
border-radius: 5px;
text-align: center;
margin: 10px auto;
outline: none;
}
.txtsub{
width: 240px;
background-color: #2c3e50;
border: 0;
color: white;
padding: 10px;
border-radius: 6px;
cursor: pointer;
transition: 1s;
}
.txtsub:hover{
background-color: white;
color: #2c3e50;
font-weight: bold;
}
.now-hr{
border-bottom: 1px solid white;
margin: 15px auto;
}
.then-other{
display: block;
box-sizing: border-box;
position: relative;
list-style-type: none;
}
.then-other li{
display: inline-block;
padding: 10px;

}
.then-other li a{
color: white;
text-decoration: none;
transition: 1s;
}
.then-other li:hover{
background-color: white;
cursor: pointer;
}
.then-other li:hover a{
color: #2c3e50;

}
</style>
</head>
<body>
<div id="mytoby">
<form class="mytoby-form" action="index.html" method="post">
<h1>WelCome</h1>
<input class="txtb" type="password" placeholder="Username">
<input class="txtb" type="password" placeholder="Password">
<input class="txtsub" type="submit" value="Login">
<p class="now-hr"></p>
<ul class="then-other">
<li><a href="index.html">无法验证?</a></li>
<li><a href="index.html">忘记密码?</a></li>
</ul>
</form>
</div>
<canvas id="canvas"></canvas>
<script>
document.body.parentNode.style.overflow = "hidden";
var oCanvas = document.querySelector("#canvas"),
// 获取一下canvas里面所有api（方法）
oCtx = oCanvas.getContext("2d");
//1获取可视区域的宽高 附值给画布
var oWidth = window.innerWidth,
oHeight = window.innerHeight;
oCanvas.width = oWidth,
oCanvas.height = oHeight;
//2准备下落的字母
var thischar = 'QWERTYUIOPASDFGHJKKLZXCVBNM';
//3设置文字大小 
var fontSize = 24;
//4一行多少个
var num = Math.floor(oWidth/fontSize);
//用一个数组去存放字母的y坐标
var drops =[];
for (let index = 0; index < num; index++) {
drops.push(0);
}
function draw() {
oCtx.fillStyle = "rgba(0,0,0,0.1)";
//设置背景颜色
oCtx.fillRect(0,0,oWidth,oHeight);
oCtx.fillStyle="green";
oCtx.font = fontSize+"px";
//造字母
for(var i = 0;i <num;i++){
var oX = i*fontSize,
oY = drops[i]*fontSize;
//绘制坐标
oCtx.fillText(thischar[Math.floor(Math.random()*thischar.length)],oX,oY);
if (oY>oHeight&&Math.random()>0.95) {
drops[i]=0;
}
drops[i]++;

}
}
setInterval(() => {
draw();
}, 50); //每隔50毫秒 去执行一次 draw这个函数
</script>
</body>
</html>
<!-- 
    基础
       //线条开始的坐标（x,y）
            // oCtx.moveTo(20,20);
            // //线条终止的地方
            // oCtx.lineTo(200,200);
            // //
            // oCtx.lineTo(400,20);
            // oCtx.lineTo(20,20);
            // //填充颜色
            // oCtx.fillStyle="lightblue";
            // oCtx.fill();
            // //画到画布上去
            // oCtx.stroke();
 -->

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

尘叶心繁

这一世以无限游戏为使命！

博主信息

排名

文章

粉丝

文章类别

.net后台框架 185篇

linux 18篇

linux中cve 1篇

windows中cve 0篇

资源分享 10篇

Win32 3篇

前端 28篇

传说中的c 5篇

Xamarin 9篇

docker 15篇

容器编排 101篇

grpc 4篇

Go 15篇

yaml模板 1篇

理论 2篇

代码雨

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}