岁月博客

  • 首页
  • 跨境电商
  • 技术文档
  • 软路由虚拟化
  • 服务器技术
  • VPS
  • 羊毛
    • 羊毛
    • 自助薅京豆系统
岁月博客
致力于关注网络安全与黑客文化,专注网络技术的分享与交流。
  1. 首页
  2. 技术文档
  3. 正文

html流星雨代码可复制(流星雨许愿动画特效源码分享)

2022年3月24日 651点热度 3人点赞 0条评论

给大家分享一段HTML的流星雨代码,一键复制保存到html文件即可打开运行

<!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>

<!--
javascript
画笔
-->
<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>

运行的效果如下:

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请及时联系我们qq邮箱:1107996578@qq.com,一经查实,本站将立刻删除。

标签: 暂无
最后更新:2022年3月24日

岁月

以梦为马,随处可栖

点赞
< 上一篇
下一篇 >

文章评论

您需要 登录 之后才可以评论

岁月

以梦为马,随处可栖

最新 热点 随机
最新 热点 随机
抖音是什么平台,抖音平台基本属性介绍 抖加投放技巧以及注意事项,抖音dou+详细的投放攻略 抖音id怎么修改,抖音用户名修改教程 ipad抖音怎么设置横竖屏,平板横竖屏的设置教程 抖音浏览量突然猛涨怎么回事,抖音播放突然增多的原因 fiddler创建根证书不成功解决方案--岁月博客提供
白嫖电视点播VIP(电视免费看VIP视频攻略) 什么是线性数据结构(线性数据详解) 什么是mysql的服务器(MySQL数据库基本原理和作用介绍) CentOS使用yum update更新时不升级内核的方法 ie被360主页锁定了怎么改为百度(浏览器主页被锁定解决方案) 安装域时提示“安装Active Directory 域服务二进制文件失败”的解决办法
分类
  • VPS
  • 技术文档
  • 新闻
  • 服务器技术
  • 未分类
  • 羊毛
  • 跨境电商
  • 软路由虚拟化
最近评论
kkkki 发布于 9 个月前(07月05日) 100好像可以开韩国了把,我今天误打误撞开成功了
kiritoghy 发布于 10 个月前(05月26日) 想问一下如果azure for students开B1S+64G SSD就是免费的吗,不会扣100刀...

COPYRIGHT © 2022 岁月博客 ALL RIGHTS RESERVED.

豫ICP备2022005050号