{"id":6306,"date":"2025-01-15T15:07:38","date_gmt":"2025-01-15T07:07:38","guid":{"rendered":"https:\/\/www.xinyixx.com\/?p=6306"},"modified":"2025-01-15T15:16:30","modified_gmt":"2025-01-15T07:16:30","slug":"js-2","status":"publish","type":"post","link":"https:\/\/www.xinyixx.com\/index.php\/2025\/01\/15\/js-2\/","title":{"rendered":"JS\u7a0b\u5e8f2\uff1a\u70b9\u51fb\u5c31\u9001\u7684\u3010\u5c0f\u4e09\u89d2\u3011"},"content":{"rendered":"<p>\u4e0a\u4e00\u8282\u5199\u4e86\uff1a<a href=\"http:\/\/101.42.96.217:21080\/index.php\/2025\/01\/15\/js-code\/?swcfpc=1\" data-type=\"link\" data-id=\"http:\/\/101.42.96.217:21080\/index.php\/2025\/01\/15\/js-code\/?swcfpc=1\">JS\u7a0b\u5e8f1\uff1a\u5199\u4e00\u4e2a\u70ab\u9177\u7684\u3010\u7c92\u5b50\u52a8\u753b\u3011<\/a>\uff0c\u8fd9\u4e00\u6b21\u5199\u5165\u5bf9\u9f20\u6807\u70b9\u51fb\u4e8b\u4ef6\u7684\u6548\u679c\uff0c\u5355\u51fb\u5373\u53ef\u751f\u6210\u5c0f\u4e09\u89d2\u5f62\u5e76\u5411\u56db\u5468\u968f\u673a\u6269\u6563\uff1a<\/p>\n\n\n\n<p>\u6e90\u4ee3\u7801\uff08\u4fdd\u5b58\u81f3\u672c\u5730\u5373\u53ef\uff09\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;\u65cb\u8f6c\u79fb\u52a8\u7684\u5f69\u8272\u4e09\u89d2\u5f62&lt;\/title&gt;\n&lt;style&gt;\n  canvas {\n    display: block;\n    margin: 0 auto;\n    background-color: #000;\n  }\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;canvas id=\"canvas\"&gt;&lt;\/canvas&gt;\n&lt;script&gt;\n\/\/ \u83b7\u53d6canvas\u5143\u7d20\u548c\u7ed8\u56fe\u4e0a\u4e0b\u6587\nconst canvas = document.getElementById('canvas');\nconst ctx = canvas.getContext('2d');\ncanvas.width = window.innerWidth;\ncanvas.height = window.innerHeight;\n\n\/\/ \u4e09\u89d2\u5f62\u7c7b\nclass Triangle {\n  constructor(x, y, size, color, rotationSpeed, xSpeed, ySpeed) {\n    this.x = x;\n    this.y = y;\n    this.size = size;\n    this.color = color;\n    this.rotation = 0;\n    this.rotationSpeed = rotationSpeed;\n    this.xSpeed = xSpeed;\n    this.ySpeed = ySpeed;\n  }\n\n  draw() {\n    ctx.save();\n    ctx.translate(this.x, this.y);\n    ctx.rotate((Math.PI \/ 180) * this.rotation);\n    ctx.beginPath();\n    ctx.moveTo(0, -this.size);\n    ctx.lineTo(this.size * Math.sqrt(3) \/ 2, this.size \/ 2);\n    ctx.lineTo(-this.size * Math.sqrt(3) \/ 2, this.size \/ 2);\n    ctx.closePath();\n    ctx.strokeStyle = this.color;\n    ctx.lineWidth = 2;\n    ctx.stroke();\n    ctx.restore();\n    this.rotation += this.rotationSpeed;\n  }\n\n  update() {\n    this.x += this.xSpeed;\n    this.y += this.ySpeed;\n    \/\/ \u8fb9\u754c\u68c0\u6d4b\n    if (this.x + this.size &gt; canvas.width || this.x - this.size &lt; 0) {\n      this.xSpeed *= -1;\n    }\n    if (this.y + this.size &gt; canvas.height || this.y - this.size &lt; 0) {\n      this.ySpeed *= -1;\n    }\n  }\n}\n\n\/\/ \u5b58\u50a8\u4e09\u89d2\u5f62\u5b9e\u4f8b\u7684\u6570\u7ec4\nconst triangles = &#91;];\n\n\/\/ \u52a8\u753b\u51fd\u6570\nfunction animate() {\n  requestAnimationFrame(animate);\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  triangles.forEach(triangle =&gt; {\n    triangle.update();\n    triangle.draw();\n  });\n}\n\n\/\/ \u6dfb\u52a0\u65b0\u4e09\u89d2\u5f62\nfunction addTriangle(e) {\n  const size = Math.random() * 30 + 10;\n  const color = `hsl(${Math.random() * 360}, 100%, 50%)`;\n  const rotationSpeed = (Math.random() - 0.5) * 5;\n  const xSpeed = (Math.random() - 0.5) * 5;\n  const ySpeed = (Math.random() - 0.5) * 5;\n  const triangle = new Triangle(e.clientX, e.clientY, size, color, rotationSpeed, xSpeed, ySpeed);\n  triangles.push(triangle);\n}\n\n\/\/ \u76d1\u542c\u9f20\u6807\u70b9\u51fb\u4e8b\u4ef6\ncanvas.addEventListener('click', addTriangle);\n\n\/\/ \u5f00\u59cb\u52a8\u753b\nanimate();\n\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p>\u5728\u4e0b\u9762\u70b9\u51fb\u9f20\u6807\u8bd5\u8bd5\u5427<\/p>\n\n\n\n\n<style>\n  canvas {\n    display: block;\n    margin: 0 auto;\n    background-color: #000;\n  }\n<\/style>\n\n<canvas style=\"width:100%;height:100%\" id=\"canvas\"><\/canvas>\n\n<script>\n\/\/ \u83b7\u53d6canvas\u5143\u7d20\u548c\u7ed8\u56fe\u4e0a\u4e0b\u6587\nconst canvas = document.getElementById('canvas');\nconst ctx = canvas.getContext('2d');\ncanvas.width = window.innerWidth;\ncanvas.height = window.innerHeight;\n\n\/\/ \u4e09\u89d2\u5f62\u7c7b\nclass Triangle {\n  constructor(x, y, size, color, rotationSpeed, xSpeed, ySpeed) {\n    this.x = x;\n    this.y = y;\n    this.size = size;\n    this.color = color;\n    this.rotation = 0;\n    this.rotationSpeed = rotationSpeed;\n    this.xSpeed = xSpeed;\n    this.ySpeed = ySpeed;\n  }\n\n  draw() {\n    ctx.save();\n    ctx.translate(this.x, this.y);\n    ctx.rotate((Math.PI \/ 180) * this.rotation);\n    ctx.beginPath();\n    ctx.moveTo(0, -this.size);\n    ctx.lineTo(this.size * Math.sqrt(3) \/ 2, this.size \/ 2);\n    ctx.lineTo(-this.size * Math.sqrt(3) \/ 2, this.size \/ 2);\n    ctx.closePath();\n    ctx.strokeStyle = this.color;\n    ctx.lineWidth = 2;\n    ctx.stroke();\n    ctx.restore();\n    this.rotation += this.rotationSpeed;\n  }\n\n  update() {\n    this.x += this.xSpeed;\n    this.y += this.ySpeed;\n    \/\/ \u8fb9\u754c\u68c0\u6d4b\n    if (this.x + this.size > canvas.width || this.x - this.size < 0) {\n      this.xSpeed *= -1;\n    }\n    if (this.y + this.size > canvas.height || this.y - this.size < 0) {\n      this.ySpeed *= -1;\n    }\n  }\n}\n\n\/\/ \u5b58\u50a8\u4e09\u89d2\u5f62\u5b9e\u4f8b\u7684\u6570\u7ec4\nconst triangles = [];\n\n\/\/ \u52a8\u753b\u51fd\u6570\nfunction animate() {\n  requestAnimationFrame(animate);\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  triangles.forEach(triangle => {\n    triangle.update();\n    triangle.draw();\n  });\n}\n\n\/\/ \u6dfb\u52a0\u65b0\u4e09\u89d2\u5f62\nfunction addTriangle(e) {\n  const size = Math.random() * 30 + 10;\n  const color = `hsl(${Math.random() * 360}, 100%, 50%)`;\n  const rotationSpeed = (Math.random() - 0.5) * 5;\n  const xSpeed = (Math.random() - 0.5) * 5;\n  const ySpeed = (Math.random() - 0.5) * 5;\n  const triangle = new Triangle(e.clientX, e.clientY, size, color, rotationSpeed, xSpeed, ySpeed);\n  triangles.push(triangle);\n}\n\n\/\/ \u76d1\u542c\u9f20\u6807\u70b9\u51fb\u4e8b\u4ef6\ncanvas.addEventListener('click', addTriangle);\n\n\/\/ \u5f00\u59cb\u52a8\u753b\nanimate();\n\n<\/script>\n\n\n\n\n\n<p>\u5b9e\u73b0\u6548\u679c\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><noscript><img decoding=\"async\" width=\"1024\" height=\"493\" src=\"http:\/\/101.42.96.217:21080\/wp-content\/uploads\/2025\/01\/image-9-1024x493.png\" alt class=\"wp-image-6311\" srcset=\"https:\/\/www.xinyixx.com\/wp-content\/uploads\/2025\/01\/image-9-1024x493.png 1024w, https:\/\/www.xinyixx.com\/wp-content\/uploads\/2025\/01\/image-9-300x144.png 300w, https:\/\/www.xinyixx.com\/wp-content\/uploads\/2025\/01\/image-9-768x370.png 768w, https:\/\/www.xinyixx.com\/wp-content\/uploads\/2025\/01\/image-9-1536x739.png 1536w, https:\/\/www.xinyixx.com\/wp-content\/uploads\/2025\/01\/image-9.png 1912w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/noscript><img decoding=\"async\" width=\"1024\" height=\"493\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201024%20493%22%3E%3C%2Fsvg%3E\" alt class=\"wp-image-6311 lazyload\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201024%20493%22%3E%3C%2Fsvg%3E 1024w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" data-srcset=\"https:\/\/www.xinyixx.com\/wp-content\/uploads\/2025\/01\/image-9-1024x493.png 1024w, https:\/\/www.xinyixx.com\/wp-content\/uploads\/2025\/01\/image-9-300x144.png 300w, https:\/\/www.xinyixx.com\/wp-content\/uploads\/2025\/01\/image-9-768x370.png 768w, https:\/\/www.xinyixx.com\/wp-content\/uploads\/2025\/01\/image-9-1536x739.png 1536w, https:\/\/www.xinyixx.com\/wp-content\/uploads\/2025\/01\/image-9.png 1912w\" data-src=\"http:\/\/101.42.96.217:21080\/wp-content\/uploads\/2025\/01\/image-9-1024x493.png\"><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\u4e0a\u4e00\u8282\u5199\u4e86\uff1aJS\u7a0b\u5e8f1\uff1a\u5199\u4e00\u4e2a\u70ab\u9177\u7684\u3010\u7c92\u5b50\u52a8\u753b\u3011\uff0c\u8fd9\u4e00\u6b21\u5199\u5165\u5bf9\u9f20\u6807\u70b9\u51fb\u4e8b\u4ef6\u7684\u6548\u679c\uff0c\u5355\u51fb\u5373\u53ef\u751f\u6210\u5c0f\u4e09\u89d2\u5f62\u5e76\u5411\u56db\u5468 [&hellip;]<\/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":[10],"tags":[462],"class_list":["post-6306","post","type-post","status-publish","format-standard","hentry","category-coding","tag-javascript","entry"],"_links":{"self":[{"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/posts\/6306","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=6306"}],"version-history":[{"count":6,"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/posts\/6306\/revisions"}],"predecessor-version":[{"id":6313,"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/posts\/6306\/revisions\/6313"}],"wp:attachment":[{"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/media?parent=6306"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/categories?post=6306"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xinyixx.com\/index.php\/wp-json\/wp\/v2\/tags?post=6306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}