{"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<pre class=\"wp-block-code\"><code>\n&lt;style>\n  #particle-container {\n    background-color: rgb(4, 59, 78);\n  }\n&lt;\/style>\n\n&lt;canvas id=\"particle-container\">&lt;\/canvas>\n\n&lt;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 &lt; 0 || this.x > canvas.width - this.radius) {\n      this.speedX *= -1;\n    }\n    if (this.y - this.radius &lt; 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 = &#91;];\nfor (let i = 0; i &lt; 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&lt;\/script><\/code><\/pre>\n\n\n\n<p>\u5b9e\u73b0\u6548\u679c\uff1a<\/p>\n\n\n\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>\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5b9e\u73b0\u6548\u679c\uff1a<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[5],"tags":[],"class_list":["post-6298","post","type-post","status-publish","format-standard","hentry","category-ai-learn","entry"],"_links":{"self":[{"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/posts\/6298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/comments?post=6298"}],"version-history":[{"count":7,"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/posts\/6298\/revisions"}],"predecessor-version":[{"id":6305,"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/posts\/6298\/revisions\/6305"}],"wp:attachment":[{"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/media?parent=6298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/categories?post=6298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/tags?post=6298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}