<! DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "/> < span style> body {margin: 0; padding: 0; overflow: hidden; } canvas { background-color: black; } </style> </head> <body> <canvas id="snow"></canvas> <script> var canvas = document.getElementsByTagName("canvas")[0]; var context = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; /* function snow() { context.save(); context.beginPath(); context.translate(100, 100); context.moveTo(-20, 0); context.lineTo(20, 0); context.strokeStyle = "#fff"; context.lineWidth = 5; context.lineCap = "round"; var disX = Math.sin((30 * Math.PI) / 180) * 20; var disY = Math.sin((60 * Math.PI) / 180) * 20; context.moveTo(-disX, -disY); context.lineTo(disX, disY); context.moveTo(-disX, disY); context.lineTo(disX, -disY); context.stroke(); context.restore(); context.save(); context.beginPath(); context.translate(50, 50); context.moveTo(-20, 0); context.lineTo(20, 0); context.strokeStyle = "#fff"; context.lineWidth = 5; context.lineCap = "round"; var disX = Math.sin((30 * Math.PI) / 180) * 20; var disY = Math.sin((60 * Math.PI) / 180) * 20; context.moveTo(-disX, -disY); context.lineTo(disX, disY); context.moveTo(-disX, disY); context.lineTo(disX, -disY); context.stroke(); context.restore(); } */ function Snow(x, y, scale, rotate, speedX, speedY, speedR) { this.x = x; this.y = y; this.scale = scale; this.speedX = speedX; this.speedY = speedY; this.speedR = speedR; this.rotate = rotate; } Snow.prototype.render = function () { context.save(); context.beginPath(); context.translate(this.x, this.y); context.scale(this.scale, this.scale); context.rotate(this.rotate * Math.PI / 180); context.moveTo(-20, 0); context.lineTo(20, 0); context.strokeStyle = "#fff"; context.lineWidth = 5; context.lineCap = "round"; var disX = Math.sin((30 * Math.PI) / 180) * 20; var disY = Math.sin((60 * Math.PI) / 180) * 20; context.moveTo(-disX, -disY); context.lineTo(disX, disY); context.moveTo(-disX, disY); context.lineTo(disX, -disY); context.stroke(); context.restore(); }; var snowArray = []; function init() { var len = 100; for (var i = 0; i < len; i++) { var x = Math.random() * canvas.width; Var scale = math.random () + 0.5; var rotate = Math.random() * 60; var speedX = Math.random() + 1; var speedY = Math.random() + 5; var speedR = Math.random() * 4 + 2; (function (x, y, scale, rotate, speedX, speedY, speedR) { setTimeout(function () { var snow = new Snow(x, y, scale, rotate, speedX, speedY, speedR); snow.render(); snowArray.push(snow); }, Math.random() * 8000); })(x, 0, scale, rotate, speedX, speedY, speedR); } snowing(); } init(); Function snowing () {setInterval (function () {context. ClearRect (0, 0, canvas width, canvas, height) for (var I = 0; i < snowArray.length; i++) { snowArray[i].x = (snowArray[i].x + snowArray[i].speedX) % canvas.width; snowArray[i].y = (snowArray[i].y + snowArray[i].speedY) % canvas.height; snowArray[i].rotate = (snowArray[i].rotate + snowArray[i].speedR) % 60; snowArray[i].render(); }}, 30); } </script> </body></html>Copy the code