<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="text/css"> * {margin: 0;padding: 0;} html, body {height: 100%;overflow: hidden;} </style> </head> <body> <canvas></canvas> </body> <script type="text/javascript"> window.onload = function() { var oc = document.querySelector("canvas"); oc.width = document.documentElement.clientWidth; oc.height = document.documentElement.clientHeight; if (oc.getContext) { var ctx = oc.getContext(‘2d‘); var arr = []; setInterval(() => { var x = Math.random() * oc.width; arr.push({ x, y: 0, r: Math.round(Math.random() * 5 + 1), deg: 0, step: Math.random()*10 }); }, 100); setInterval(() => { ctx.clearRect(0, 0, oc.width, oc.height); ctx.fillStyle = "black"; ctx.fillRect(0, 0, oc.width, oc.height); for (let i = 0; i < arr.length; i++) { if (arr[i].y >= oc.height) { arr.splice(i, 1); } arr[i].deg += 5; arr[i].y += 2; arr[i].x += 2 * Math.sin(arr[i].deg * Math.PI / 180); } for (let i = 0; i < arr.length; i++) { ctx.save(); ctx.fillStyle = "#FFFFFF"; const {x, y, r} = arr[i]; ctx.beginPath(); ctx.arc(x, y, r, 0, 2 * Math.PI); ctx.fill(); ctx.restore(); } }, 1000 / 60); } } </script> </html>
原文：https://www.cnblogs.com/qiuxd/p/12986961.html
