1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             padding: 0ex;
  11.         }
  12.         :root,body{
  13.             height: 100%;
  14.         }
  15.         canvas{
  16.             background: #000;
  17.             /* width: 100%;
  18.             height: 100%; */
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <canvas id="canvas"></canvas>
  24.     <script src="./classSnow.js"></script>
  25. </body>
  26. </html>
  1. /**@type{HTMLCanvasElement}*/
  2. const canvas = document.getElementById('canvas');
  3. const ctx = canvas.getContext('2d');
  4. const snowArr = []; // 储存雪花
  5. canvas.width = window.innerWidth;
  6. canvas.height = window.innerHeight;
  8. class Snow {
  9.     constructor(x, y, speedx, speedy, scale, rotate, speedR) {
  10.         this.x = x; // 雪花显示的x轴位置
  11.         this.y = y; // 雪花显示的y轴位置
  12.         this.speedx = speedx; // 雪花x轴方向移速
  13.         this.speedy = speedy; // 雪花y轴方向移速
  14.         this.scale = scale; // 雪花缩放比例
  15.         this.rotate = rotate; // 雪花初始旋转角度
  16.         this.speedR = speedR; // 雪花每次绘制的旋转角度
  17.     }
  18.     /**
  19.      * 渲染雪花
  20.      */
  21.     rendom() {
  22.         // 保存当前画布的状态
  23.         ctx.save()
  24.         /**
  25.          * 开启新新路径
  26.          * 平移画布实现雪花的平移
  27.          * 旋转坐标轴实现雪花的的旋转
  28.          * 缩放坐标的刻度进行缩放，实现雪花的大小
  29.          */
  30.         ctx.beginPath()
  31.         ctx.translate(this.x, this.y);
  32.         ctx.rotate(this.rotate * Math.PI / 180)
  33.         ctx.scale(this.scale, this.scale)
  34.         // 先话一条x轴的线，作为雪花的基础线
  35.         ctx.moveTo(-20, 0)
  36.         ctx.lineTo(20, 0)
  37.         //  设置线宽线的的颜色以及线的样式
  38.         ctx.strokeStyle = "#fff"
  39.         ctx.lineWidth = 5;
  40.         ctx.lineCap = 'round';
  41.         // 计算出 雪花斜线一端在其坐标轴的位置
  42.         let disX = Math.sin(30 * Math.PI / 180) * 20;
  43.         let dixY = Math.sin(60 * Math.PI / 180) * 20;
  44.         // 设置斜线1
  45.         ctx.moveTo(disX, -dixY)
  46.         ctx.lineTo(-disX, dixY)
  47.         // 设置斜线2
  48.         ctx.moveTo(-disX, -dixY)
  49.         ctx.lineTo(disX, dixY)
  50.         // 渲染斜线，并将画布恢复到初始状态
  51.         ctx.stroke()
  52.         ctx.restore()
  54.     }
  55. }
  57. /**
  58.      * 随机雪花的属性
  59.      */
  60. function randomSnowAttribute() {
  61.     /**
  62.      * x : x轴位置
  63.      * speedX ：横向移动速度
  64.      * speedY : 竖直方向的移动速度
  65.      * rotate ： 旋转角度
  66.      * scale  ： 缩放
  67.      * speedR : 旋转的角度的大小
  68.      */
  69.     const x = Math.random() * canvas.width;
  70.     const speedX = Math.random() + 1;
  71.     const speedY = Math.random() + 5;
  72.     const rotate = Math.random() * 60;
  73.     const scale = Math.random() + 0.5;
  74.     const speedR = Math.random() * 4 + 2;
  75.     return {
  76.         x,
  77.         speedX,
  78.         speedY,
  79.         rotate,
  80.         scale,
  81.         speedR
  82.     }
  83. }
  84. /**
  85.  * 制造雪花
  86.  */
  87. function productionSnow() {
  88.     for (let i = 0; i < 100; i++) {
  89.         // 不定时制造雪花
  90.         setTimeout(() => {
  91.             let { x, speedX, speedY, rotate, scale, speedR } = randomSnowAttribute();
  92.             let snows = new Snow(x, 0, speedX, speedY, scale, rotate, speedR)
  93.             snows.rendom()
  94.             snowArr.push(snows);
  95.         }, Math.random() * 8000);
  97.     }
  98.     moveSnow()
  99. }
  100. /**
  101.  * 移动雪花
  102.  */
  103. function moveSnow() {
  104.     setInterval(() => {
  105.         // 清空画布 每次绘制就清空画布进行重新绘制
  106.         ctx.clearRect(0, 0, canvas.width, canvas.height)
  107.         // 移动每一个雪花
  108.         for (let i = 0; i < snowArr.length; i++) {
  109.             let snow = snowArr[i]
  110.             snow.x = (snow.x + snow.speedx) % canvas.width;
  111.             snow.y = (snow.y + snow.speedy) % canvas.height;
  112.             snow.rotate = (snow.rotate + snow.speedR) % 60
  113.             snow.rendom()
  114.         }
  115.     }, 30);
  116. }
  117. /**
  118.  * 初始函数
  119.  */
  120. function init() {
  121.     productionSnow()
  122. }
  124. init()
  125. /**
  126.  * 当可视窗口改变时
  127.  */
  128. window.onresize = function () {
  129.     canvas.width = window.innerWidth;
  130.     canvas.height = window.innerHeight;
  131.     for (let i = 0; i < snowArr.length; i++) {
  132.         setTimeout(() => {
  133.             let { x, speedX, speedY, rotate, scale, speedR } = randomSnowAttribute();
  134.             snowArr[i].x = x;
  135.         }, Math.random() * 8000);
  136.     }
  137. }

雪花如何绘制

image.png
雪花是个对称图形，图中橙色的线条就是雪花，从图中可以看圆得直径就是橙色线的长度，你再看图的右上，添加一条绿色的辅助线，刚好成为一个直线三三角形
且锐角为60°与30°的三角形，而我们需要知道线的终点在其的坐标轴的位置，现在一条斜角边为r（也就是蓝色圆得半径）,那吗利用三角函数就可以求出另外两条边的长度，得出两条直角边的长度不就得出第一象限中橙色线的终点坐标，sin60° = 对边 / 斜边 对边（也就是y轴坐标） = r * sin60° ， x轴同理，由于是对称图形那不就是所在坐标的绝对值相同，只是所在的区间不一样，图形中x轴那条橙色线是事先规定好的，不然哪来的蓝色圆得半径