IT問答中心

Java技術(shù)入門

html流星雨代碼 html流星雨代碼詳解

發(fā)布： Java培訓(xùn)問答發(fā)布時間：2021-08-24 16:14:25

推薦答案

品牌型號：聯(lián)想小新Pro13/系統(tǒng)版本：windows10

基于HTML+CSS+JS實現(xiàn)流星雨特效實現(xiàn)，可用于移動開發(fā)以及網(wǎng)站背景圖，具體代碼如下：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>流星雨</title>

        <meta name="keywords" content="關(guān)鍵詞，關(guān)鍵字">

        <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 當(dāng)前文檔

            //getElement 獲取一個標(biāo)簽

            //ById 通過Id名稱的方式

            //var 聲明一片空間

            //var canvas 聲明一片空間的名字叫做canvas

            var canvas = document.getElementById("canvas");

            //獲取畫板權(quán)限上下文

            var ctx = canvas.getContext("2d");

            //讓畫板的大小等于屏幕的大小

            /*

                思路：

                    1.獲取屏幕對象

                    2.獲取屏幕的尺寸

                    3.屏幕的尺寸賦值給畫板

            */

            //獲取屏幕對象

            var s = window.screen;

            //獲取屏幕的寬度和高度

            var w = s.width;

            var h = s.height;

            //設(shè)置畫板的大小

            canvas.width = w;

            canvas.height = h;



            //設(shè)置文字大小

            var fontSize = 14;

            //計算一行有多少個文字取整數(shù) 向下取整

            var clos = Math.floor(w/fontSize);

            //思考每一個字的坐標(biāo)

            //創(chuàng)建數(shù)組把clos 個 0 （y坐標(biāo)存儲起來）

            var drops = [];

            var str = "qwertyuiopasdfghjklzxcvbnm";

            //往數(shù)組里面添加 clos 個 0

            for(var i = 0;i<clos;i++) {

                drops.push(0);

            }



            //繪制文字

            function drawString() {

                //給矩形設(shè)置填充色

                ctx.fillStyle="rgba(0,0,0,0.05)"

                //繪制一個矩形

                ctx.fillRect(0,0,w,h);



                //添加文字樣式

                ctx.font = "600 "+fontSize+"px 微軟雅黑";

                //設(shè)置文字顏色

                ctx.fillStyle = "#00ff00";



                for(var i = 0;i<clos;i++) {

                    //x坐標(biāo)

                    var x = i*fontSize;

                    //y坐標(biāo)

                    var y = drops[i]*fontSize;

                    //設(shè)置繪制文字

                    ctx.fillText(str[Math.floor(Math.random()*str.length)],x,y);

                    if(y>h&&Math.random()>0.99){

                        drops[i] = 0;

                    }

                    drops[i]++;

                }



            }

            //定義一個定時器，每隔30毫秒執(zhí)行一次

            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; //當(dāng)前的窗口的高度

            stars.width = windowWidth;

            stars.height = window.innerHeight;

            context = stars.getContext("2d");

        }

        //創(chuàng)建一個星星對象

        var Star = function () {

            this.x = windowWidth * Math.random();//橫坐標(biāo)

            this.y = 5000 * Math.random();//縱坐標(biāo)

            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 = ""; //流星的色彩

            /****************初始化函數(shù)********************/

            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;

            }

            /**************獲取隨機顏色函數(shù)*****************/

            this.getRandomColor = function () {

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

//中段顏色

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

//結(jié)束顏色

                this.color2 = "black";

            }

            /***************重新計算流星坐標(biāo)的函數(shù)******************/

            this.countPos = function ()//

            {

//往左下移動,x減少，y增加

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

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

            }

            /*****************獲取隨機坐標(biāo)的函數(shù)*****************/

            this.getPos = function () //

            {

//橫坐標(biāo)200--1200

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

//縱坐標(biāo)小于600

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

            }

            /****繪制流星***************************/

            this.draw = function () //繪制一個流星的函數(shù)

            {

                context.save();

                context.beginPath();

                context.lineWidth = 1; //寬度

                context.globalAlpha = this.alpha; //設(shè)置透明度

//創(chuàng)建橫向漸變顏色,起點坐標(biāo)至終點坐標(biāo)

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

                    this.x + this.width,

                    this.y - this.height);

//分段設(shè)置顏色

                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);

        }

        /*流星雨結(jié)束*/

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

上一篇：新媒體技術(shù)包括哪些

下一篇：ps復(fù)制快捷鍵

中公旗下IT培訓(xùn)品牌

中公教育品牌

　中公教育是一家中國領(lǐng)先的全品類職業(yè)教育機構(gòu)，提供超過100個品類的綜合職業(yè)就業(yè)培訓(xùn)服務(wù)。公司在全國超過1000個直營網(wǎng)點展開經(jīng)營，深度覆蓋300多個地級市，并正在快速向數(shù)千個縣城和高校擴張。
完善就業(yè)體系

通過階段性授課機制，和每階段的定期考核，先讓學(xué)員能夠?qū)W會所學(xué)內(nèi)容，才能找打合適工作。最后一個階段為就業(yè)課程，從技術(shù)和面試兩個方面加深就業(yè)能力，并且還有不定期的雙選會供大家選擇。
全程面授+實戰(zhàn)技術(shù)

線下課程全程是師資面對面教學(xué)，不會存在上課只對著大屏幕上課的情況，有問題都可以在課上得到解答。并且優(yōu)就業(yè)通過自主研發(fā)大綱和學(xué)習(xí)路線，并且定期更新課程所學(xué)技術(shù)，讓大家所學(xué)技術(shù)不落伍。

中公優(yōu)就業(yè)專業(yè)職業(yè)規(guī)劃老師

為您詳細(xì)答疑解惑，更能領(lǐng)取免費課程

點擊立即咨詢

IT培訓(xùn)

關(guān)注我們

熱門課程更多 >

關(guān)注我們

中公教育 IT 培訓(xùn) 品牌

專注于職業(yè)教育的A股上市公司

證券代碼：002607

首頁

師資團隊

教學(xué)服務(wù)

教學(xué)環(huán)境

選課中心

學(xué)習(xí)路線

IT問答中心

推薦答案

其它答案

中公旗下IT培訓(xùn)品牌

中公教育品牌

完善就業(yè)體系

全程面授+實戰(zhàn)技術(shù)

中公優(yōu)就業(yè)專業(yè)職業(yè)規(guī)劃老師

相關(guān)問題

更多課程

優(yōu)就業(yè)：ujiuye

IT培訓(xùn)

關(guān)注我們

熱門課程 更多 >

關(guān)注我們

中 公 教 育 IT 培 訓(xùn) 品 牌 專注于職業(yè)教育的A股上市公司 證券代碼：002607

首頁

師資團隊

教學(xué)服務(wù)

教學(xué)環(huán)境

選課中心

學(xué)習(xí)路線

IT問答中心

推薦答案

其它答案

中公旗下IT培訓(xùn)品牌

中公教育品牌

完善就業(yè)體系

全程面授+實戰(zhàn)技術(shù)

中公優(yōu)就業(yè)專業(yè)職業(yè)規(guī)劃老師

相關(guān)問題

更多課程

優(yōu)就業(yè)：ujiuye

熱門課程更多 >

中公教育 IT 培訓(xùn) 品牌

專注于職業(yè)教育的A股上市公司

證券代碼：002607