首页
IT培训常见问题
企业资讯
学员活动
师资团队
图书教材
发布 : Java培训问答 发布时间:2021-08-24 16:14:25
基于HTML+CSS+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>
- <!--
- 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>
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>流星雨</title>
- <script>
- var context;
- var arr = new Array();
- var starCount = 800;
- var rains = new Array();
- var rainCount = 20;
- function init() {
- var stars = document.getElementById("stars");
- windowWidth = window.innerWidth; //当前的窗口的高度
- stars.width = windowWidth;
- stars.height = window.innerHeight;
- context = stars.getContext("2d");
- }
- //创建一个星星对象
- var Star = function () {
- this.x = windowWidth * Math.random();//横坐标
- this.y = 5000 * Math.random();//纵坐标
- this.text = ".";//文本
- this.color = "white";//颜色
- this.getColor = function () {
- var _r = Math.random();
- if (_r < 0.5) {
- this.color = "#333";
- } else {
- this.color = "white";
- }
- }
- //初始化
- this.init = function () {
- this.getColor();
- }
- //绘制
- this.draw = function () {
- context.fillStyle = this.color;
- context.fillText(this.text, this.x, this.y);
- }
- }
- //画月亮
- function drawMoon() {
- var moon = new Image();
- moon.src = "./images/moon.jpg"
- context.drawImage(moon, -5, -10);
- }
- //页面加载的时候
- window.onload = function () {
- init();
- //画星星
- for (var i = 0; i < starCount; i++) {
- var star = new Star();
- star.init();
- star.draw();
- arr.push(star);
- }
- //画流星
- for (var i = 0; i < rainCount; i++) {
- var rain = new MeteorRain();
- rain.init();
- rain.draw();
- rains.push(rain);
- }
- drawMoon();//绘制月亮
- playStars();//绘制闪动的星星
- playRains();//绘制流星
- }
- //星星闪起来
- function playStars() {
- for (var n = 0; n < starCount; n++) {
- arr[n].getColor();
- arr[n].draw();
- }
- setTimeout("playStars()", 100);
- }
- /*流星雨开始*/
- var MeteorRain = function () {
- this.x = -1;
- this.y = -1;
- this.length = -1;//长度
- this.angle = 30; //倾斜角度
- this.width = -1;//宽度
- this.height = -1;//高度
- this.speed = 1;//速度
- this.offset_x = -1;//横轴移动偏移量
- this.offset_y = -1;//纵轴移动偏移量
- this.alpha = 1; //透明度
- this.color1 = "";//流星的色彩
- this.color2 = ""; //流星的色彩
- /****************初始化函数********************/
- this.init = function () //初始化
咨询还可获得
对应免费课程