HTML流星雨动画许愿特效代码

以下是html流星雨许愿动画代码,很多人都在玩这个源码,那么今天来分享一下,大家直接新建html,代码输入进去行。

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>流星雨</title>
  6. <meta name="keywords" content="关键词,关键字">
  7. <meta name="description" content="描述信息">
  8. <style>
  9. body {
  10. margin: 0;
  11. overflow: hidden;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <!--
  17. <canvas>画布 画板 画画的本子
  18. -->
  19. <canvas width=400 height=400 style="background:#000000;" id="canvas"></canvas>
  20. <!--
  21. javascript
  22. 画笔
  23. -->
  24. <script>
  25. //获取画板
  26. //doccument 当前文档
  27. //getElement 获取一个标签
  28. //ById 通过Id名称的方式
  29. //var 声明一片空间
  30. //var canvas 声明一片空间的名字叫做canvas
  31. var canvas = document.getElementById("canvas");
  32. //获取画板权限 上下文
  33. var ctx = canvas.getContext("2d");
  34. //让画板的大小等于屏幕的大小
  35. /*
  36. 思路:
  37. 1.获取屏幕对象
  38. 2.获取屏幕的尺寸
  39. 3.屏幕的尺寸赋值给画板
  40. */
  41. //获取屏幕对象
  42. var s = window.screen;
  43. //获取屏幕的宽度和高度
  44. var w = s.width;
  45. var h = s.height;
  46. //设置画板的大小
  47. canvas.width = w;
  48. canvas.height = h;
  49. //设置文字大小
  50. var fontSize = 14;
  51. //计算一行有多少个文字 取整数 向下取整
  52. var clos = Math.floor(w/fontSize);
  53. //思考每一个字的坐标
  54. //创建数组把clos 个 0 (y坐标存储起来)
  55. var drops = [];
  56. var str = "qwertyuiopasdfghjklzxcvbnm";
  57. //往数组里面添加 clos 个 0
  58. for(var i = 0;i<clos;i++) {
  59. drops.push(0);
  60. }
  61. //绘制文字
  62. function drawString() {
  63. //给矩形设置填充色
  64. ctx.fillStyle="rgba(0,0,0,0.05)"
  65. //绘制一个矩形
  66. ctx.fillRect(0,0,w,h);
  67. //添加文字样式
  68. ctx.font = "600 "+fontSize+"px 微软雅黑";
  69. //设置文字颜色
  70. ctx.fillStyle = "#00ff00";
  71. for(var i = 0;i<clos;i++) {
  72. //x坐标
  73. var x = i*fontSize;
  74. //y坐标
  75. var y = drops[i]*fontSize;
  76. //设置绘制文字
  77. ctx.fillText(str[Math.floor(Math.random()*str.length)],x,y);
  78. if(y>h&&Math.random()>0.99){
  79. drops[i] = 0;
  80. }
  81. drops[i]++;
  82. }
  83. }
  84. //定义一个定时器,每隔30毫秒执行一次
  85. setInterval(drawString,30);
  86. </script>
  87. </body>
  88. </html>

演示图

HTML流星雨动画许愿特效代码

未分类

WordPress移除小工具区块代码方法

2025-5-15 16:44:59

未分类

2023河北艺考生文化课录取线预估

2025-5-15 16:45:03

0 条回复 A文章作者 M管理员
欢迎您,新朋友,感谢参与互动!
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
私信列表
搜索