{"id":1409,"date":"2025-06-18T17:59:18","date_gmt":"2025-06-18T09:59:18","guid":{"rendered":"https:\/\/womeifei.cn\/?p=1409"},"modified":"2025-06-18T17:59:18","modified_gmt":"2025-06-18T09:59:18","slug":"canvas%e5%88%9d%e8%af%86","status":"publish","type":"post","link":"https:\/\/womeifei.cn\/index.php\/2025\/06\/18\/canvas%e5%88%9d%e8%af%86\/","title":{"rendered":"Canvas\u521d\u8bc6"},"content":{"rendered":"\n
\"\"<\/div><\/figure>\n\n\n\n

\u8fd9\u4f4d\u5927\u4f6c\u7684\u4e2a\u4eba\u535a\u5ba2\u80cc\u666f\u9875\u6709\u6de1\u70b9\u70b9\u6548\u679c \u8fd8\u4f1a\u8ddf\u968f\u9f20\u6807\u8fdb\u884c\u53d8\u52a8 \u5f88\u597d\u5947\u662f\u600e\u4e48\u505a\u7684 \u8ffd\u8e2a\u5143\u7d20\u540e\u53d1\u73b0\u662f<Canvas><\/Canvas>\u6807\u7b7e \u65e9\u6709\u542c\u95fbCanvas \u6240\u4ee5\u53bb\u7b80\u5355\u4e86\u89e3\u4e00\u4e0b<\/p>\n\n\n\n

Canvas\u4ecb\u7ecd<\/strong><\/p>\n\n\n\n

Canvas\uff08\u753b\u5e03\uff09<\/strong>\u00a0\u662f HTML5 \u63d0\u4f9b\u7684\u4e00\u4e2a\u00a0\u56fe\u5f62\u7ed8\u5236 API<\/strong>\uff0c\u5141\u8bb8\u5f00\u53d1\u8005\u901a\u8fc7 JavaScript \u5728\u7f51\u9875\u4e0a\u52a8\u6001\u6e32\u67d3\u00a02D \u6216 3D \u56fe\u5f62<\/strong> \u5b83\u5c31\u50cf\u4e00\u4e2a\u7a7a\u767d\u7684\u753b\u677f\uff0c\u4f60\u53ef\u4ee5\u7528\u4ee3\u7801\u5728\u4e0a\u9762\u7ed8\u5236\u5404\u79cd\u56fe\u5f62\u3001\u52a8\u753b\u3001\u6e38\u620f\u753b\u9762\uff0c\u751a\u81f3\u8fdb\u884c\u56fe\u50cf\u5904\u7406 <\/p>\n\n\n\n

Canvas\u6838\u5fc3\u7279\u70b9<\/strong><\/p>\n\n\n\n

\u7279\u70b9<\/th>\u8bf4\u660e<\/th><\/tr><\/thead>
\u57fa\u4e8e\u50cf\u7d20<\/strong><\/td>\u76f4\u63a5\u64cd\u4f5c\u50cf\u7d20\u70b9\uff0c\u9002\u5408\u9ad8\u6027\u80fd\u56fe\u5f62\u6e32\u67d3<\/td><\/tr>
\u65e0 DOM \u7ed3\u6784<\/strong><\/td>\u7ed8\u5236\u7684\u56fe\u5f62\u4e0d\u4f1a\u751f\u6210 HTML \u5143\u7d20\uff0c\u6027\u80fd\u66f4\u9ad8<\/td><\/tr>
\u5373\u65f6\u6e32\u67d3<\/strong><\/td>\u6bcf\u6b21\u7ed8\u5236\u540e\uff0c\u5185\u5bb9\u4e0d\u4f1a\u81ea\u52a8\u4fdd\u5b58\uff0c\u9700\u8981\u624b\u52a8\u66f4\u65b0<\/td><\/tr>
\u652f\u6301 2D & 3D<\/strong><\/td>getContext(\"2d\")<\/code> \u7528\u4e8e 2D \u7ed8\u56fe\uff0cgetContext(\"webgl\")<\/code> \u7528\u4e8e 3D<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

\u5177\u4f53\u600e\u4e48\u4f7f\u7528\u5148\u4e0d\u6df1\u7a76 \u901a\u8fc7\u4e00\u4e2a\u6d41\u661f\u96e8\u7279\u6548\u5148\u611f\u53d7\u4e00\u4e0bCanvas\u7684\u9b45\u529b<\/p>\n\n\n\n

\"\"<\/div><\/figure>\n\n\n\n

\u4ee3\u7801\u5982\u4e0b<\/strong><\/p>\n\n\n\n

<!DOCTYPE html>\n\n\n<html lang=\"zh\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta\n        http-equiv=\"X-UA-Compatible\"\n        content=\"IE=edge\"\n    >\n    <meta\n        name=\"viewport\"\n        content=\"width=device-width, initial-scale=1.0\"\n    >\n    <style>\n        \/*\u57fa\u7840css*\/\n        * {\n            margin: 0;\n            padding: 0;\n        }\n\n        body {\n            background: #333;\n            overflow: hidden;\n        }\n\n        .main {\n            \/*class main\u6837\u5f0f*\/\n            width: 100%;\n            height: 100vh;\n            position: fixed;\n            \/* background: url(\"https:\/\/duckduckstudio.github.io\/yazicbs.github.io\/GenshinImpact\/photos\/original\/20230706070439.png\"); *\/\n            background: #000;\n            background-size: cover;\n            background-position: center bottom;\n        }\n\n        #canvas {\n            filter: drop-shadow(0 0 1px white);\n        }\n    <\/style>\n    <title>\u966a\u4f60\u53bb\u770b\u6d41\u661f\u96e8<\/title>\n<\/head>\n\n<body>\n    <div class=\"main\">\n        <canvas id=\"canvas\"><\/canvas>\n    <\/div>\n    <script>\n        \/\/ \u83b7\u53d6\u753b\u5e03\u5143\u7d20\u548c\u4e0a\u4e0b\u6587\n        let canvas = document.querySelector(\"#canvas\");\n        let ctx = canvas.getContext(\"2d\");\n\n        \/\/ \u8bbe\u7f6e\u753b\u5e03\u5927\u5c0f\u4e3a\u7a97\u53e3\u5927\u5c0f\n        canvas.width = window.innerWidth;\n        canvas.height = window.innerHeight;\n\n        \/\/ \u5b58\u50a8\u6240\u6709\u6d41\u661f\u7684\u6570\u7ec4\n        let meteors = [];\n        \/\/ \u6d41\u661f\u7684\u6570\u91cf\n        let allstar = 40;\n\n        \/\/ \u521d\u59cb\u5316\u51fd\u6570\uff0c\u751f\u6210\u6307\u5b9a\u6570\u91cf\u7684\u6d41\u661f\n        function init() {\n            for (let i = 0; i < allstar; i++) {\n                newmeteor(); \/\/ \u521b\u5efa\u65b0\u7684\u6d41\u661f\u5bf9\u8c61\u5e76\u6dfb\u52a0\u5230\u6570\u7ec4\u4e2d\n            }\n        }\n\n        \/\/ \u521b\u5efa\u65b0\u7684\u6d41\u661f\u5bf9\u8c61\u5e76\u6dfb\u52a0\u5230\u6570\u7ec4\u4e2d\n        function newmeteor() {\n            meteors.push({\n                \/\/ \u6d41\u661f\u7684\u5c3e\u5df4\u4f4d\u7f6e\n                lines: [{\n                    x: parseInt(Math.random() * canvas.width),\n                    y: parseInt(Math.random() * canvas.height),\n                }],\n                \/\/ \u6d41\u661f\u7684\u5b58\u5728\u65f6\u95f4\n                life: parseInt(Math.random() * 200) + 100,\n                \/\/ \u6d41\u661f\u7684\u5e74\u9f84\n                age: 0\n            });\n        }\n\n        \/\/ \u7ed8\u5236\u51fd\u6570\uff0c\u7528\u4e8e\u7ed8\u5236\u6240\u6709\u7684\u6d41\u661f\n        function draw() {\n            \/\/ \u6e05\u9664\u753b\u5e03\n            ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n            \/\/ \u904d\u5386\u7ed8\u5236\u6bcf\u4e2a\u6d41\u661f\n            for (let i = 0; i < meteors.length; i++) {\n                let meteor = meteors[i];\n                let lines = meteor.lines;\n\n                \/\/ \u7ed8\u5236\u6d41\u661f\u7684\u5c3e\u5df4\n                for (let j = 0; j < lines.length; j++) {\n                    ctx.fillStyle = `rgba(255,255,255,${j \/ lines.length})`;\n                    ctx.fillRect(lines[j].x, lines[j].y, 1, 1);\n                }\n\n                \/\/ \u7ed8\u5236\u6d41\u661f\u7684\u5934\u90e8\n                ctx.fillStyle = '#8cdcfe';\n                let s_head = lines[lines.length - 1];\n                ctx.fillRect(s_head.x, s_head.y, 2, 2);\n\n                \/\/ \u66f4\u65b0\u6d41\u661f\u7684\u4f4d\u7f6e\n                if (meteor.age <= meteor.life \/ 2) {\n                    lines.push({\n                        x: s_head.x + 1,\n                        y: s_head.y + 0.3\n                    });\n                } else {\n                    lines.shift();\n                }\n\n                \/\/ \u589e\u52a0\u6d41\u661f\u7684\u5e74\u9f84\uff0c\u5e76\u5728\u5176\u5bff\u547d\u7ed3\u675f\u65f6\u79fb\u9664\u5e76\u751f\u6210\u65b0\u7684\u6d41\u661f\n                meteor.age++;\n                if (meteor.age >= meteor.life) {\n                    meteors.splice(i, 1);\n                    newmeteor();\n                }\n            }\n        }\n\n        \/\/ \u521d\u59cb\u5316\u5e76\u5f00\u59cb\u7ed8\u5236\n\n        init();\n        setInterval(draw, 10); \/\/ \u6bcf\u6beb\u79d2\u91cd\u7ed8\u4e00\u6b21\n    <\/script>\n<\/body>\n\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u8fd9\u4f4d\u5927\u4f6c\u7684\u4e2a\u4eba\u535a\u5ba2\u80cc\u666f\u9875\u6709\u6de1\u70b9\u70b9\u6548\u679c \u8fd8\u4f1a\u8ddf\u968f\u9f20\u6807\u8fdb\u884c\u53d8\u52a8 \u5f88\u597d\u5947\u662f\u600e\u4e48\u505a\u7684 \u8ffd\u8e2a\u5143\u7d20\u540e\u53d1\u73b0\u662f<Canv […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33,1],"tags":[],"class_list":["post-1409","post","type-post","status-publish","format-standard","hentry","category-canvas","category-1"],"_links":{"self":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts\/1409","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1409"}],"version-history":[{"count":1,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts\/1409\/revisions"}],"predecessor-version":[{"id":1413,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts\/1409\/revisions\/1413"}],"wp:attachment":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1409"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1409"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}