tnblog
首页
视频
资源
登录

代码雨

4173人阅读 2019/4/10 16:26 总访问:2535778 评论: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

评价
这一世以无限游戏为使命!
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
欢迎加群交流技术