如何使用html实现流星雨的效果(代码)


本文摘自PHP中文网,作者不言,侵删。

本篇文章给大家带来的内容是关于如何使用html实现流星雨的效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

<!doctype html>

<html>

    <head>

        <meta charset="GB2312" />

        <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 = "#ff2d2d";

  

                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>

相关推荐:

纯css3流星雨_html/css_WEB-ITnose

HTML5梦幻之旅――炫丽的流星雨效果实现过程_html5教程技巧

html在图片上实现下雨效果_html/css_WEB-ITnose

以上就是如何使用html实现流星雨的效果(代码)的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

Html的<basefont>标签

网站对联广告js代码分享

Html边框线怎么设置

Html th有什么用

Html如何设置按钮大小

Html文字居中怎么设置

Html、css和js的注释规范用法有哪些

Html页面自动清理js、css文件的缓存(自动添加版本号)_Html/xHtml_网页制作

js开发之动态修改网页元素样式

Html中使用css的方法有哪几种

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...