(function(){ // 初始化函数 用于启动雪花效果 function init(){ var canvas = document.getElementById('effectiveAppsSnow'); // 条件判断 如果未找到画布元素则不执行 if (!canvas) return; var context = canvas.getContext('2d'); var viewportWidth = window.innerWidth; var viewportHeight = window.innerHeight; var devicePixelRatio = window.devicePixelRatio || 1; // 从后端配置读取雪花形状 默认值为 dot var configuredShape = (window.YooneSnowSettings && window.YooneSnowSettings.shape) ? window.YooneSnowSettings.shape : 'dot'; function resizeCanvas(){ viewportWidth = window.innerWidth; viewportHeight = window.innerHeight; var displayWidth = viewportWidth; var displayHeight = viewportHeight; canvas.style.width = displayWidth + 'px'; canvas.style.height = displayHeight + 'px'; canvas.width = Math.floor(displayWidth * devicePixelRatio); canvas.height = Math.floor(displayHeight * devicePixelRatio); context.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0); } resizeCanvas(); var snowflakeCount = Math.floor(Math.min(400, Math.max(120, (viewportWidth * viewportHeight) / 12000))); var snowflakes = []; for (var i = 0; i < snowflakeCount; i++){ // 为每个雪花确定形状类型 如果是 mixed 则随机赋值 dot 或 flake var snowflakeShapeType; if (configuredShape === 'mixed') { // 条件判断 随机选择雪花形状 snowflakeShapeType = Math.random() < 0.5 ? 'dot' : 'flake'; } else { snowflakeShapeType = configuredShape; } snowflakes.push({ positionX: Math.random() * viewportWidth, positionY: Math.random() * viewportHeight, radius: Math.random() * 2 + 1, driftSpeed: Math.random() * 0.6 + 0.4, swingAmplitude: Math.random() * 0.8 + 0.2, shapeType: snowflakeShapeType }); } function updateSnowflakes(){ for (var j = 0; j < snowflakes.length; j++){ var flake = snowflakes[j]; flake.positionY += flake.driftSpeed * 2 + flake.radius * 0.25; flake.positionX += Math.sin(flake.positionY * 0.01) * flake.swingAmplitude; if (flake.positionY > viewportHeight + 5){ flake.positionY = -5; flake.positionX = Math.random() * viewportWidth; flake.radius = Math.random() * 2 + 1; flake.driftSpeed = Math.random() * 0.6 + 0.4; flake.swingAmplitude = Math.random() * 0.8 + 0.2; } } } // 绘制雪花形状 使用线段绘制六角雪花 function drawSnowflake(x, y, size) { context.save(); context.translate(x, y); context.fillStyle = 'rgba(255,255,255,0.9)'; context.strokeStyle = 'rgba(255,255,255,0.9)'; context.lineWidth = size * 0.15; // 循环绘制六个分支 for (var i = 0; i < 6; i++) { context.rotate(Math.PI / 3); context.beginPath(); context.moveTo(0, 0); context.lineTo(0, size); context.stroke(); // 绘制分支上的小分叉 context.beginPath(); context.moveTo(0, size * 0.3); context.lineTo(size * 0.3, size * 0.5); context.stroke(); context.beginPath(); context.moveTo(0, size * 0.5); context.lineTo(-size * 0.3, size * 0.7); context.stroke(); context.beginPath(); context.moveTo(0, size * 0.7); context.lineTo(size * 0.3, size * 0.9); context.stroke(); } context.restore(); } // 绘制圆点形状 使用填充圆形作为雪花 function drawDot(x, y, size) { context.beginPath(); context.arc(x, y, size, 0, Math.PI * 2); context.fillStyle = 'rgba(255,255,255,0.9)'; context.fill(); } function drawSnowflakes(){ context.clearRect(0, 0, viewportWidth, viewportHeight); for (var k = 0; k < snowflakes.length; k++){ var flake = snowflakes[k]; // 条件判断 根据形状类型绘制雪花 if (flake.shapeType === 'dot') { drawDot(flake.positionX, flake.positionY, flake.radius); } else { drawSnowflake(flake.positionX, flake.positionY, flake.radius * 3); } } } function animate(){ updateSnowflakes(); drawSnowflakes(); requestAnimationFrame(animate); } window.addEventListener('resize', function(){ resizeCanvas(); viewportWidth = window.innerWidth; viewportHeight = window.innerHeight; }); animate(); } // 条件判断 如果文档尚未加载则等待 DOMContentLoaded 事件 if (document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', init); } else { init(); } })();