{"id":210,"date":"2025-11-25T09:45:51","date_gmt":"2025-11-25T01:45:51","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=210"},"modified":"2025-11-25T09:45:51","modified_gmt":"2025-11-25T01:45:51","slug":"canvas%e7%bb%98%e5%88%b6%e5%83%8f%e7%b4%a0%e9%a3%8e%e5%9b%be%e7%89%87%e7%9a%84%e7%a4%ba%e4%be%8b%e4%bb%a3%e7%a0%81","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/11\/25\/canvas%e7%bb%98%e5%88%b6%e5%83%8f%e7%b4%a0%e9%a3%8e%e5%9b%be%e7%89%87%e7%9a%84%e7%a4%ba%e4%be%8b%e4%bb%a3%e7%a0%81\/","title":{"rendered":"Canvas\u7ed8\u5236\u50cf\u7d20\u98ce\u56fe\u7247\u7684\u793a\u4f8b\u4ee3\u7801"},"content":{"rendered":"\n<p>\u660e\u767d\u4e86\uff0c\u963f\u6770\uff01\u4e0b\u9762\u7ed9\u4f60\u4e00\u4e2a <strong>Canvas \u7ed8\u5236\u50cf\u7d20\u98ce\u56fe\u7247\u7684\u5b8c\u6574\u793a\u4f8b<\/strong>\uff0c\u7279\u70b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u901a\u8fc7\u4e8c\u7ef4\u6570\u7ec4\u6216\u50cf\u7d20\u6570\u636e\u751f\u6210\u50cf\u7d20\u753b<\/li>\n\n\n\n<li>\u53ef\u63a7\u5236\u6bcf\u4e2a\u201c\u50cf\u7d20\u201d\u7684\u5927\u5c0f<\/li>\n\n\n\n<li>\u53ef\u52a8\u6001\u6e32\u67d3\u989c\u8272<\/li>\n<\/ul>\n\n\n\n<p>\u793a\u4f8b\u5b9e\u73b0\u4e00\u4e2a\u7b80\u5355\u7684 8\u00d78 \u50cf\u7d20\u7231\u5fc3\u56fe\u6848\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;Canvas \u50cf\u7d20\u98ce\u793a\u4f8b&amp;lt;\/title&gt;\n&amp;lt;style&gt;\n  body { display:flex; justify-content:center; align-items:center; height:100vh; background:#f5f5f5; }\n  canvas { border:1px solid #333; image-rendering: pixelated; }\n&amp;lt;\/style&gt;\n&amp;lt;\/head&gt;\n&amp;lt;body&gt;\n\n&amp;lt;canvas id=&quot;pixelCanvas&quot; width=&quot;160&quot; height=&quot;160&quot;&gt;&amp;lt;\/canvas&gt;\n\n&amp;lt;script&gt;\nconst canvas = document.getElementById(&#039;pixelCanvas&#039;);\nconst ctx = canvas.getContext(&#039;2d&#039;);\n\n\/\/ \u6bcf\u4e2a\u50cf\u7d20\u5927\u5c0f\nconst pixelSize = 20;\n\n\/\/ \u50cf\u7d20\u6570\u636e\uff088x8 \u5fc3\u5f62\uff09\nconst pixelData = &#x5B;\n  &#x5B;0,0,1,0,0,1,0,0],\n  &#x5B;0,1,1,1,1,1,1,0],\n  &#x5B;1,1,1,1,1,1,1,1],\n  &#x5B;1,1,1,1,1,1,1,1],\n  &#x5B;0,1,1,1,1,1,1,0],\n  &#x5B;0,0,1,1,1,1,0,0],\n  &#x5B;0,0,0,1,1,0,0,0],\n  &#x5B;0,0,0,0,0,0,0,0],\n];\n\n\/\/ \u5bf9\u5e94\u989c\u8272\uff080=\u900f\u660e\uff0c1=\u7ea2\u8272\uff09\nconst colors = &#x5B;&#039;#ffffff00&#039;,&#039;#ff0000&#039;];\n\n\/\/ \u7ed8\u5236\u50cf\u7d20\u753b\nfunction drawPixelArt(){\n  for(let y=0; y&amp;lt;pixelData.length; y++){\n    for(let x=0; x&amp;lt;pixelData&#x5B;y].length; x++){\n      ctx.fillStyle = colors&#x5B;pixelData&#x5B;y]&#x5B;x]];\n      ctx.fillRect(x*pixelSize, y*pixelSize, pixelSize, pixelSize);\n    }\n  }\n}\n\ndrawPixelArt();\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>\u50cf\u7d20\u98ce\u6548\u679c<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>image-rendering: pixelated;<\/code> \u4fdd\u6301\u50cf\u7d20\u8fb9\u7f18\u6e05\u6670<\/li>\n\n\n\n<li>\u6bcf\u4e2a\u50cf\u7d20\u901a\u8fc7 <code>fillRect<\/code> \u7ed8\u5236<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u81ea\u5b9a\u4e49\u50cf\u7d20\u56fe<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>pixelData<\/code> \u6570\u7ec4\u4e2d\u6bcf\u4e2a\u503c\u5bf9\u5e94\u4e00\u79cd\u989c\u8272<\/li>\n\n\n\n<li>\u53ef\u6269\u5c55\u6210\u66f4\u5927\u5206\u8fa8\u7387\uff0c\u5982 16\u00d716\u300132\u00d732<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u6613\u6269\u5c55<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u53ef\u6dfb\u52a0\u52a8\u6001\u6548\u679c\uff08\u5982\u95ea\u70c1\u3001\u52a8\u753b\uff09<\/li>\n\n\n\n<li>\u53ef\u52a0\u8f7d\u771f\u5b9e\u5c0f\u56fe\u50cf\uff0c\u8f6c\u4e3a\u50cf\u7d20\u98ce\u7ed8\u5236<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>\u660e\u767d\u4e86\uff0c\u963f\u6770\uff01\u4e0b\u9762\u7ed9\u4f60\u4e00\u4e2a Canvas \u7ed8\u5236\u50cf\u7d20\u98ce\u56fe\u7247\u7684\u5b8c\u6574\u793a\u4f8b\uff0c\u7279\u70b9\uff1a \u793a\u4f8b&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/11\/25\/canvas%e7%bb%98%e5%88%b6%e5%83%8f%e7%b4%a0%e9%a3%8e%e5%9b%be%e7%89%87%e7%9a%84%e7%a4%ba%e4%be%8b%e4%bb%a3%e7%a0%81\/\">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-210","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\/210","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=210"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/210\/revisions"}],"predecessor-version":[{"id":211,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/210\/revisions\/211"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=210"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=210"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}