{"id":212,"date":"2025-11-25T09:52:31","date_gmt":"2025-11-25T01:52:31","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=212"},"modified":"2025-11-25T09:52:31","modified_gmt":"2025-11-25T01:52:31","slug":"canvas%e5%a6%82%e4%bd%95%e5%81%9a%e4%b8%aa%e9%9b%aa%e8%8a%b1%e5%b1%8f%e7%89%88404%e7%9a%84%e5%ae%9e%e7%8e%b0","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/11\/25\/canvas%e5%a6%82%e4%bd%95%e5%81%9a%e4%b8%aa%e9%9b%aa%e8%8a%b1%e5%b1%8f%e7%89%88404%e7%9a%84%e5%ae%9e%e7%8e%b0\/","title":{"rendered":"Canvas\u5982\u4f55\u505a\u4e2a\u96ea\u82b1\u5c4f\u7248404\u7684\u5b9e\u73b0"},"content":{"rendered":"\n<p>\u660e\u767d\u4e86\uff0c\u963f\u6770\uff01\u4f60\u60f3\u8981\u505a\u4e00\u4e2a <strong>Canvas \u96ea\u82b1\u6548\u679c + 404 \u9875\u9762<\/strong>\uff0c\u8fd9\u79cd\u6548\u679c\u975e\u5e38\u9177\uff0c\u7c7b\u4f3c\u201c\u96ea\u82b1\u98d8\u843d + \u4e2d\u5fc3\u663e\u793a404\u4fe1\u606f\u201d\u3002\u6211\u7ed9\u4f60\u5199\u4e00\u4e2a <strong>\u5b8c\u6574\u53ef\u76f4\u63a5\u8fd0\u884c\u7684\u793a\u4f8b<\/strong>\uff1a<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;!DOCTYPE html&gt;\n&amp;lt;html lang=&quot;zh-CN&quot;&gt;\n&amp;lt;head&gt;\n&amp;lt;meta charset=&quot;UTF-8&quot;&gt;\n&amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n&amp;lt;title&gt;404 \u96ea\u82b1\u9875\u9762&amp;lt;\/title&gt;\n&amp;lt;style&gt;\n  body, html {\n    margin:0;\n    padding:0;\n    width:100%;\n    height:100%;\n    overflow:hidden;\n    background:#001f3f;\n    display:flex;\n    justify-content:center;\n    align-items:center;\n    color:#fff;\n    font-family: Arial, sans-serif;\n  }\n  #canvas {\n    position:absolute;\n    top:0;\n    left:0;\n  }\n  .message {\n    position:relative;\n    z-index:1;\n    text-align:center;\n  }\n  .message h1 { font-size:80px; margin:0; }\n  .message p { font-size:24px; margin-top:10px; }\n&amp;lt;\/style&gt;\n&amp;lt;\/head&gt;\n&amp;lt;body&gt;\n\n&amp;lt;canvas id=&quot;canvas&quot;&gt;&amp;lt;\/canvas&gt;\n&amp;lt;div class=&quot;message&quot;&gt;\n  &amp;lt;h1&gt;404&amp;lt;\/h1&gt;\n  &amp;lt;p&gt;\u9875\u9762\u627e\u4e0d\u5230\u5566\uff5e&amp;lt;\/p&gt;\n&amp;lt;\/div&gt;\n\n&amp;lt;script&gt;\nconst canvas = document.getElementById(&#039;canvas&#039;);\nconst ctx = canvas.getContext(&#039;2d&#039;);\n\nlet w = canvas.width = window.innerWidth;\nlet h = canvas.height = window.innerHeight;\n\n\/\/ \u751f\u6210\u96ea\u82b1\nconst numFlakes = 150;\nconst flakes = &#x5B;];\n\nfor(let i=0;i&amp;lt;numFlakes;i++){\n  flakes.push({\n    x: Math.random()*w,\n    y: Math.random()*h,\n    r: Math.random()*4 + 1,   \/\/ \u96ea\u82b1\u534a\u5f84\n    d: Math.random()*numFlakes\n  });\n}\n\n\/\/ \u7ed8\u5236\u96ea\u82b1\nfunction drawFlakes(){\n  ctx.clearRect(0,0,w,h);\n  ctx.fillStyle = &quot;rgba(255,255,255,0.8)&quot;;\n  ctx.beginPath();\n  for(let i=0;i&amp;lt;numFlakes;i++){\n    const f = flakes&#x5B;i];\n    ctx.moveTo(f.x,f.y);\n    ctx.arc(f.x,f.y,f.r,0,Math.PI*2,true);\n  }\n  ctx.fill();\n  moveFlakes();\n}\n\n\/\/ \u96ea\u82b1\u79fb\u52a8\nlet angle = 0;\nfunction moveFlakes(){\n  angle += 0.01;\n  for(let i=0;i&amp;lt;numFlakes;i++){\n    const f = flakes&#x5B;i];\n    f.y += Math.cos(angle + f.d) + 1 + f.r\/2;\n    f.x += Math.sin(angle) * 2;\n\n    \/\/ \u91cd\u65b0\u56de\u5230\u9876\u90e8\n    if(f.x &gt; w + 5 || f.x &amp;lt; -5 || f.y &gt; h){\n      f.x = Math.random()*w;\n      f.y = -10;\n    }\n  }\n}\n\n\/\/ \u52a8\u753b\u5faa\u73af\nfunction animate(){\n  drawFlakes();\n  requestAnimationFrame(animate);\n}\n\nanimate();\n\n\/\/ \u81ea\u9002\u5e94\u7a97\u53e3\nwindow.addEventListener(&#039;resize&#039;, ()=&gt;{\n  w = canvas.width = window.innerWidth;\n  h = canvas.height = window.innerHeight;\n});\n&amp;lt;\/script&gt;\n\n&amp;lt;\/body&gt;\n&amp;lt;\/html&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd39 \u7279\u6027\u8bf4\u660e<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u96ea\u82b1\u98d8\u843d\u6548\u679c<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u6bcf\u4e2a\u96ea\u82b1\u968f\u673a\u5927\u5c0f\u3001\u901f\u5ea6<\/li>\n\n\n\n<li>\u4f7f\u7528 <code>Math.sin<\/code> \u548c <code>Math.cos<\/code> \u5b9e\u73b0\u8f7b\u5fae\u5de6\u53f3\u6447\u6446<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>404 \u9875\u9762\u663e\u793a<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u5c45\u4e2d\u663e\u793a <code>404<\/code> \u548c\u63d0\u793a\u6587\u672c<\/li>\n\n\n\n<li>\u96ea\u82b1\u5728 Canvas \u4e0a\u65b9\u98d8\u843d\uff0c\u6587\u5b57\u59cb\u7ec8\u53ef\u89c1<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u54cd\u5e94\u5f0f\u7a97\u53e3<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>resize<\/code> \u81ea\u52a8\u8c03\u6574 Canvas \u5927\u5c0f<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u53ef\u6269\u5c55<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u8c03\u6574 <code>numFlakes<\/code> \u63a7\u5236\u96ea\u82b1\u6570\u91cf<\/li>\n\n\n\n<li>\u8c03\u6574 <code>r<\/code> \u63a7\u5236\u96ea\u82b1\u5927\u5c0f<\/li>\n\n\n\n<li>\u53ef\u4ee5\u66ff\u6362\u96ea\u82b1\u4e3a\u56fe\u7247\u5c0f\u56fe\u6807\uff08\u6bd4\u5982\u5c0f\u96ea\u82b1PNG\uff09<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>\u660e\u767d\u4e86\uff0c\u963f\u6770\uff01\u4f60\u60f3\u8981\u505a\u4e00\u4e2a Canvas \u96ea\u82b1\u6548\u679c + 404 \u9875\u9762\uff0c\u8fd9\u79cd\u6548\u679c\u975e&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/11\/25\/canvas%e5%a6%82%e4%bd%95%e5%81%9a%e4%b8%aa%e9%9b%aa%e8%8a%b1%e5%b1%8f%e7%89%88404%e7%9a%84%e5%ae%9e%e7%8e%b0\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-212","post","type-post","status-publish","format-standard","hentry","category-html5"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=212"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/212\/revisions"}],"predecessor-version":[{"id":213,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/212\/revisions\/213"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}