JavaScript下雪动画demo

在现代网页设计中，动画效果已成为吸引用户注意力和提升用户体验的重要手段之一。今天，我们将介绍一款基于JavaScript的下雪动画demo。

在页面加载时，通过Canvas绘制出一个黑色背景，并在其中随机生成若干个雪花。然后，通过requestAnimationFrame函数不断更新雪花的位置，实现雪花飘落的效果

1. 在HTML文件中添加一个Canvas元素，并设置其宽度和高度。

   <canvas id="snowCanvas"></canvas>

                      // 获取canvas元素和上下文
			var canvas = document.getElementById('snowCanvas');
			var ctx = canvas.getContext('2d');

			// 设置canvas宽高
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;

2. 在JavaScript文件中编写绘制背景和雪花的函数，并在页面加载时调用。

                    // 定义雪花数组
    	var snowflakes = [];
   
    	// 创建雪花对象
    	function createSnowflake() {
    		var x = Math.random() * canvas.width;
    		var y = 0;
    		var radius = Math.random() * 3 + 1;
    		var speed = Math.random() * 3 + 1;
    		var angle = Math.random() * 360;
    		snowflakes.push({
    			x: x,
    			y: y,
    			radius: radius,
    			speed: speed,
    			angle: angle
    		});
    	}
   
    	// 绘制雪花
    	function drawSnowflake(snowflake) {
    		ctx.beginPath();
    		ctx.arc(snowflake.x, snowflake.y, snowflake.radius, 0, Math.PI * 2);
    		ctx.fillStyle = 'white';
    		ctx.fill();
    	}
   

3. 编写动画函数，通过requestAnimationFrame函数不断更新雪花的位置。

      // 更新雪花位置
      function updateSnowflake(snowflake) {
      	snowflake.y += snowflake.speed;
      	snowflake.angle += 0.01;
      	snowflake.x += Math.sin(snowflake.angle) * 2;
   
      	if (snowflake.y > canvas.height) {
      		snowflake.y = 0;
      	}
      }
   
      // 渲染函数
      function render() {
      	ctx.clearRect(0, 0, canvas.width, canvas.height);
   
      	for (var i = 0; i < snowflakes.length; i++) {
      		drawSnowflake(snowflakes[i]);
      		updateSnowflake(snowflakes[i]);
      	}
   
      	requestAnimationFrame(render);
      }
           
   

4. 生成雪花、渲染。

            // 创建雪花
      for (var i = 0; i < 100; i++) {
      	createSnowflake();
      }
   
      // 开始渲染
      render();
   

希望这篇教程对您有所帮助。