IT问答中心

Java技术入门

html流星雨代码 html流星雨代码详解

发布： Java培训问答发布时间：2021-08-24 16:14:25

推荐答案

品牌型号：联想小新Pro13/系统版本：windows10

基于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 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>

其它答案

牛仔很忙2020-06-22 18:56:36

<!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 () //初始化

            {

                this.getPos();

                this.alpha = 1;//透明度

                this.getRandomColor();

//最小长度，最大长度

                var x = Math.random() * 80 + 150;

                this.length = Math.ceil(x);

// x = Math.random()*10+30;

                this.angle = 30; //流星倾斜角

                x = Math.random() + 0.5;

                this.speed = Math.ceil(x); //流星的速度

                var cos = Math.cos(this.angle * 3.14 / 180);

                var sin = Math.sin(this.angle * 3.14 / 180);

                this.width = this.length * cos; //流星所占宽度

                this.height = this.length * sin;//流星所占高度

                this.offset_x = this.speed * cos;

                this.offset_y = this.speed * sin;

            }

            /**************获取随机颜色函数*****************/

            this.getRandomColor = function () {

                var a = Math.ceil(255 - 240 * Math.random());

//中段颜色

                this.color1 = "rgba(" + a + "," + a + "," + a + ",1)";

//结束颜色

                this.color2 = "black";

            }

            /***************重新计算流星坐标的函数******************/

            this.countPos = function ()//

            {

//往左下移动,x减少，y增加

                this.x = this.x - this.offset_x;

                this.y = this.y + this.offset_y;

            }

            /*****************获取随机坐标的函数*****************/

            this.getPos = function () //

            {

//横坐标200--1200

                this.x = Math.random() * window.innerWidth; //窗口高度

//纵坐标小于600

                this.y = Math.random() * window.innerHeight; //窗口宽度

            }

            /****绘制流星***************************/

            this.draw = function () //绘制一个流星的函数

            {

                context.save();

                context.beginPath();

                context.lineWidth = 1; //宽度

                context.globalAlpha = this.alpha; //设置透明度

//创建横向渐变颜色,起点坐标至终点坐标

                var line = context.createLinearGradient(this.x, this.y,

                    this.x + this.width,

                    this.y - this.height);

//分段设置颜色

                line.addColorStop(0, "white");

                line.addColorStop(0.3, this.color1);

                line.addColorStop(0.6, this.color2);

                context.strokeStyle = line;

//起点

                context.moveTo(this.x, this.y);

//终点

                context.lineTo(this.x + this.width, this.y - this.height);

                context.closePath();

                context.stroke();

                context.restore();

            }

            this.move = function () {

//清空流星像素

                var x = this.x + this.width - this.offset_x;

                var y = this.y - this.height;

                context.clearRect(x - 3, y - 3, this.offset_x + 5, this.offset_y + 5);

// context.strokeStyle="red";

// context.strokeRect(x,y-1,this.offset_x+1,this.offset_y+1);

//重新计算位置，往左下移动

                this.countPos();

//透明度增加

                this.alpha -= 0.002;

//重绘

                this.draw();

            }

        }

        //绘制流星

        function playRains() {

            for (var n = 0; n < rainCount; n++) {

                var rain = rains[n];

                rain.move();//移动

                if (rain.y > window.innerHeight) {//超出界限后重来

                    context.clearRect(rain.x, rain.y - rain.height, rain.width, rain.height);

                    rains[n] = new MeteorRain();

                    rains[n].init();

                }

            }

            setTimeout("playRains()", 2);

        }

        /*流星雨结束*/

    </script>

    <style type="text/css">

        body {

            background-color: black;

        }

        body, html {

            width: 100%;

            height: 100%;

            overflow: hidden;

        }

    </style>

</head>

<body>

<canvas id="stars"></canvas>

</body>

</html>

上一篇：新媒体技术包括哪些

下一篇：ps复制快捷键

中公旗下IT培训品牌

中公教育品牌

　中公教育是一家中国领先的全品类职业教育机构，提供超过100个品类的综合职业就业培训服务。公司在全国超过1000个直营网点展开经营，深度覆盖300多个地级市，并正在快速向数千个县城和高校扩张。
完善就业体系

通过阶段性授课机制，和每阶段的定期考核，先让学员能够学会所学内容，才能找打合适工作。最后一个阶段为就业课程，从技术和面试两个方面加深就业能力，并且还有不定期的双选会供大家选择。
全程面授+实战技术

线下课程全程是师资面对面教学，不会存在上课只对着大屏幕上课的情况，有问题都可以在课上得到解答。并且优就业通过自主研发大纲和学习路线，并且定期更新课程所学技术，让大家所学技术不落伍。

中公优就业专业职业规划老师

为您详细答疑解惑，更能领取免费课程

点击立即咨询

IT培训

关注我们

热门课程更多 >

关注我们

中公教育 IT 培训品牌

专注于职业教育的A股上市公司

证券代码：002607

首页

师资团队

教学服务

教学环境

选课中心

学习路线

IT问答中心

推荐答案

其它答案

中公旗下IT培训品牌

中公教育品牌

完善就业体系

全程面授+实战技术

中公优就业专业职业规划老师

相关问题

更多课程

优就业：ujiuye

IT培训

关注我们

热门课程 更多 >

关注我们

中 公 教 育 IT 培 训 品 牌 专注于职业教育的A股上市公司 证券代码：002607

首页

师资团队

教学服务

教学环境

选课中心

学习路线

IT问答中心

推荐答案

其它答案

中公旗下IT培训品牌

中公教育品牌

完善就业体系

全程面授+实战技术

中公优就业专业职业规划老师

相关问题

更多课程

优就业：ujiuye

热门课程更多 >

中公教育 IT 培训品牌

专注于职业教育的A股上市公司

证券代码：002607