{"id":6298,"date":"2025-01-15T13:33:39","date_gmt":"2025-01-15T05:33:39","guid":{"rendered":"https:\/\/www.xinyixx.com\/?p=6298"},"modified":"2025-01-15T14:01:06","modified_gmt":"2025-01-15T06:01:06","slug":"js-code","status":"publish","type":"post","link":"https:\/\/www.xinyixx.com\/index.php\/2025\/01\/15\/js-code\/","title":{"rendered":"JS\u7a0b\u5e8f1\uff1a\u5199\u4e00\u4e2a\u70ab\u9177\u7684\u3010\u7c92\u5b50\u52a8\u753b\u3011"},"content":{"rendered":"\n
\n<style>\n  #particle-container {\n    background-color: rgb(4, 59, 78);\n  }\n<\/style>\n\n<canvas id=\"particle-container\"><\/canvas>\n\n<script>\n\/\/ \u83b7\u53d6 canvas \u5143\u7d20\nconst canvas = document.getElementById('particle-container');\nconst ctx = canvas.getContext('2d');\n\n\/\/ \u8bbe\u7f6e canvas \u5c3a\u5bf8\ncanvas.width = window.innerWidth\/2;\ncanvas.height = window.innerHeight\/2;\n\n\/\/ \u7c92\u5b50\u7c7b\nclass Particle {\n  constructor(x, y) {\n    this.x = x;\n    this.y = y;\n    this.radius = Math.random() * 5 + 1;\n    this.color = `hsl(${Math.random() * 360}, 50%, 50%)`;\n    this.speedX = Math.random() * 2 - 1;\n    this.speedY = Math.random() * 2 - 1;\n  }\n\n  draw() {\n    ctx.beginPath();\n    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);\n    ctx.fillStyle = this.color;\n    ctx.fill();\n    ctx.closePath();\n  }\n\n  update() {\n    this.x += this.speedX;\n    this.y += this.speedY;\n    if (this.x - this.radius < 0 || this.x > canvas.width - this.radius) {\n      this.speedX *= -1;\n    }\n    if (this.y - this.radius < 0 || this.y > canvas.height - this.radius) {\n      this.speedY *= -1;\n    }\n  }\n}\n\n\/\/ \u521d\u59cb\u5316\u7c92\u5b50\u6570\u7ec4\nconst particles = [];\nfor (let i = 0; i < 100; i++) {\n  const x = Math.random() * canvas.width;\n  const y = Math.random() * canvas.height;\n  particles.push(new Particle(x, y));\n}\n\n\/\/ \u52a8\u753b\u51fd\u6570\nfunction animate() {\n  requestAnimationFrame(animate);\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  particles.forEach(particle => {\n    particle.update();\n    particle.draw();\n  });\n}\n\n\/\/ \u5f00\u59cb\u52a8\u753b\nanimate();\n<\/script><\/code><\/pre>\n\n\n\n
\u5b9e\u73b0\u6548\u679c\uff1a<\/p>\n\n\n\n\n