{"id":512,"date":"2025-12-05T19:26:05","date_gmt":"2025-12-05T11:26:05","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=512"},"modified":"2025-12-05T19:26:05","modified_gmt":"2025-12-05T11:26:05","slug":"%e5%89%8d%e7%ab%af%e9%98%b2%e5%a4%8d%e5%88%b6%e7%9a%845%e7%a7%8d%e4%b8%bb%e6%b5%81%e6%96%b9%e6%a1%88%e6%95%88%e6%9e%9c%e5%af%b9%e6%af%94%e4%b8%8e%e5%ae%9e%e7%8e%b0","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/05\/%e5%89%8d%e7%ab%af%e9%98%b2%e5%a4%8d%e5%88%b6%e7%9a%845%e7%a7%8d%e4%b8%bb%e6%b5%81%e6%96%b9%e6%a1%88%e6%95%88%e6%9e%9c%e5%af%b9%e6%af%94%e4%b8%8e%e5%ae%9e%e7%8e%b0\/","title":{"rendered":"\u524d\u7aef\u9632\u590d\u5236\u76845\u79cd\u4e3b\u6d41\u65b9\u6848\u6548\u679c\u5bf9\u6bd4\u4e0e\u5b9e\u73b0"},"content":{"rendered":"\n

\u4e0b\u9762\u7ed9\u4f60\u6574\u7406\u4e00\u4efd \u524d\u7aef\u9632\u590d\u5236\uff08\u7981\u7528\u590d\u5236\/\u7c98\u8d34\/\u9009\u62e9\/\u53f3\u952e\u7b49\uff09\u7684 5 \u79cd\u4e3b\u6d41\u65b9\u6848\u6548\u679c\u5bf9\u6bd4 + \u5b9e\u73b0\u4ee3\u7801<\/strong>\u3002
\u5185\u5bb9\u8986\u76d6\u4ece\u57fa\u7840\u5230\u589e\u5f3a\u6548\u679c\uff0c\u5e76\u9644\u5e26\u5b9e\u9645\u53ef\u7ed5\u8fc7\u6027\u5206\u6790\uff0c\u8ba9\u4f60\u53ef\u4ee5\u6839\u636e\u4e0d\u540c\u4e1a\u52a1\u9700\u6c42\u9009\u62e9\u6700\u4f73\u65b9\u6848\u3002<\/p>\n\n\n\n

\n\n\n\n

\ud83d\udeab \u524d\u7aef\u9632\u590d\u5236\u7684 5 \u79cd\u4e3b\u6d41\u65b9\u6848<\/h1>\n\n\n\n

\u2b50 \u603b\u7ed3\u4f18\u5148\u770b\uff1a\u54ea\u79cd\u6700\u6709\u6548\uff1f<\/h2>\n\n\n\n
\u6280\u672f\u65b9\u6848<\/th>\u9632\u590d\u5236\u6548\u679c<\/th>\u53ef\u7ed5\u8fc7\u6027<\/th>\u6027\u80fd\u5f71\u54cd<\/th>\u9002\u7528\u573a\u666f<\/th><\/tr><\/thead>
\u7981\u7528\u9009\u533a\uff08CSS user-select: none\uff09<\/td>\u2605\u2605\u2605<\/td>\u5bb9\u6613\u7ed5\u8fc7<\/td>\u6781\u4f4e<\/td>\u9759\u6001\u5c55\u793a\u3001\u7b80\u5355\u9650\u5236<\/td><\/tr>
\u7981\u7528\u53f3\u952e + \u7981\u7528\u5feb\u6377\u952e<\/td>\u2605\u2605\u2605<\/td>\u4e2d\u7b49\uff08\u80fd\u7ed5\u8fc7\uff09<\/td>\u4f4e<\/td>\u7f51\u9875\u6587\u6848\u4fdd\u62a4<\/td><\/tr>
JS \u5c4f\u853d copy \/ cut \/ contextmenu \u4e8b\u4ef6<\/td>\u2605\u2605\u2605\u2605<\/td>\u53ef\u7ed5\u8fc7<\/td>\u4e2d<\/td>\u5546\u57ce\u3001\u77e5\u8bc6\u4ed8\u8d39\u5185\u5bb9<\/td><\/tr>
\u534a\u6c99\u7bb1\u6e32\u67d3\uff08Canvas\u3001\u56fe\u7247\u5316\uff09<\/td>\u2605\u2605\u2605\u2605\u2605<\/td>\u96be\u590d\u5236\u6587\u672c<\/td>\u4e2d\u7b49<\/td>\u6559\u6750\u3001\u6536\u8d39\u8bfe\u7a0b\u3001\u56fe\u6587\u4fdd\u62a4<\/td><\/tr>
\u771f\u6b63\u52a0\u5bc6\u6e32\u67d3\uff08WebGL\/Canvas + \u79c1\u6709\u534f\u8bae + \u540e\u7aef\u7b7e\u540d\uff09<\/td>\u2605\u2605\u2605\u2605\u2605<\/td>\u6781\u96be\u590d\u5236\u6587\u672c<\/td>\u4e2d\u9ad8<\/td>\u9ad8\u4ef7\u503c\u5185\u5bb9\uff08\u4ed8\u8d39\u8bfe\u7a0b\u3001\u7535\u5b50\u4e66\uff09<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

\u4e0b\u9762\u9010\u4e2a\u8be6\u7ec6\u8bb2\u3002<\/p>\n\n\n\n

\n\n\n\n

1\ufe0f\u20e3 CSS \u7981\u6b62\u6587\u672c\u9009\u4e2d\uff08\u6700\u7b80\u5355\uff09<\/h1>\n\n\n\n

\u5b9e\u73b0\u65b9\u5f0f\uff08\u8de8\u6d4f\u89c8\u5668\uff09\uff1a<\/h3>\n\n\n
\n.nocopy {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n<\/pre><\/div>\n\n\n
\u5e94\u7528\uff1a<\/p>\n\n\n
\n&lt;div class="nocopy">\n  \u65e0\u6cd5\u9009\u4e2d\u8fd9\u6bb5\u6587\u5b57\n&lt;\/div>\n\n<\/pre><\/div>\n\n\n
\u4f18\u70b9<\/h3>\n\n\n\n
\u2714 \u5b9e\u73b0\u6700\u7b80\u5355
\u2714 \u517c\u5bb9\u6027\u597d
\u2714 \u521d\u7ea7\u9632\u590d\u5236<\/p>\n\n\n\n
\u7f3a\u70b9<\/h3>\n\n\n\n
\u274c \u6309 F12 \u6216\u5ba1\u67e5\u5143\u7d20\u5c31\u80fd\u590d\u5236
\u274c \u901a\u8fc7 JS \u5173\u95ed CSS \u9650\u5236\u4e5f\u53ef\u4ee5\u590d\u5236<\/p>\n\n\n\n
\ud83d\udccc \u9002\u5408\u7b80\u5355\u5185\u5bb9\u4fdd\u62a4\uff0c\u4e0d\u5efa\u8bae\u7528\u4e8e\u9ad8\u4ef7\u503c\u5185\u5bb9\u3002<\/strong><\/p>\n\n\n\n
\n\n\n\n
2\ufe0f\u20e3 \u7981\u7528\u53f3\u952e\u3001\u7981\u7528\u5e38\u89c1\u590d\u5236\u5feb\u6377\u952e<\/h1>\n\n\n\n
\u5b9e\u73b0\u65b9\u5f0f<\/h3>\n\n\n
\n\/\/ \u7981\u7528\u53f3\u952e\ndocument.addEventListener('contextmenu', e => e.preventDefault());\n\n\/\/ \u7981\u7528 Ctrl+C \/ Ctrl+X \/ Ctrl+S \u7b49\ndocument.addEventListener('keydown', e => {\n  if ((e.ctrlKey || e.metaKey) &amp;&amp; ['c', 'x', 's', 'a'].includes(e.key.toLowerCase())) {\n    e.preventDefault();\n  }\n});\n\n<\/pre><\/div>\n\n\n
\u4f18\u70b9<\/h3>\n\n\n\n
\u2714 \u517c\u5bb9\u597d
\u2714 \u8868\u9762\u4e0a\u963b\u6b62\u5927\u591a\u6570\u590d\u5236<\/p>\n\n\n\n
\u7f3a\u70b9<\/h3>\n\n\n\n
\u274c \u63a7\u5236\u53f0\u7167\u6837\u590d\u5236\u5185\u5bb9
\u274c \u6d4f\u89c8\u5668\u63d2\u4ef6\u53ef\u5173\u95ed
\u274c \u7ec8\u7aef\u7528\u6237\u53ef\u4ee5\u5173\u95ed JS<\/p>\n\n\n\n
\ud83d\udccc \u9002\u5408\u666e\u901a\u7f51\u9875\uff0c\u9700\u8981\u57fa\u7840\u9632\u590d\u5236\u9650\u5236\u65f6\u4f7f\u7528\u3002<\/strong><\/p>\n\n\n\n
\n\n\n\n
3\ufe0f\u20e3 \u76d1\u542c copy \/ cut \/ selectstart \u4e8b\u4ef6\u5f7b\u5e95\u963b\u65ad<\/h1>\n\n\n\n
\u5b9e\u73b0\u65b9\u5f0f\uff1a<\/h3>\n\n\n
\n\/\/ \u963b\u6b62 copy\ndocument.addEventListener('copy', e => {\n  e.preventDefault();\n});\n\n\/\/ \u963b\u6b62 cut\ndocument.addEventListener('cut', e => {\n  e.preventDefault();\n});\n\n\/\/ \u963b\u6b62\u9009\u4e2d\ndocument.addEventListener('selectstart', e => e.preventDefault());\n\n<\/pre><\/div>\n\n\n
\u4f18\u70b9<\/h3>\n\n\n\n
\u2714 \u6bd4 CSS \u5f3a\uff1aJS \u5c42\u7ea7\u62e6\u622a\u4e8b\u4ef6
\u2714 \u590d\u5236\u5feb\u6377\u952e\u3001\u53f3\u952e\u590d\u5236\u90fd\u65e0\u6548
\u2714 \u4e0e\u7981\u7528\u53f3\u952e\u7ec4\u5408\u6548\u679c\u66f4\u5f3a<\/p>\n\n\n\n
\u7f3a\u70b9<\/h3>\n\n\n\n
\u274c \u63a7\u5236\u53f0\u4ecd\u53ef\u590d\u5236
\u274c \u7981\u7528 JS \u5373\u53ef\u7ed5\u8fc7
\u274c \u79fb\u52a8\u7aef\u4e0d\u5b8c\u5168\u53ef\u9760<\/p>\n\n\n\n
\ud83d\udccc \u9002\u7528\u4e8e\u5185\u5bb9\u6536\u8d39\u3001\u9700\u8981\u8f83\u5f3a\u4fdd\u62a4\u4f46\u65e0\u9700\u7edd\u5bf9\u9632\u5fa1\u7684\u573a\u666f\u3002<\/strong><\/p>\n\n\n\n
\n\n\n\n
4\ufe0f\u20e3 \u5185\u5bb9\u8f6c Canvas\uff08\u6587\u5b57\u8f6c\u56fe\u7247\uff09<\/h1>\n\n\n\n
\ud83d\udccc \u8fd9\u662f\u975e\u5e38\u5f3a\u7684\u201c\u534a\u6c99\u7bb1\u201d\u65b9\u6848<\/strong>
\u56e0\u4e3a\u4e00\u65e6\u6587\u672c\u53d8\u4e3a\u56fe\u7247\uff0c\u5c31\u65e0\u6cd5\u9009\u4e2d\u590d\u5236\u3002<\/p>\n\n\n\n
\n\n\n\n
\u5b9e\u73b0\u4e3e\u4f8b\uff1a<\/h2>\n\n\n\n
HTML\uff1a<\/h3>\n\n\n
\n&lt;canvas id="textCanvas">&lt;\/canvas>\n\n<\/pre><\/div>\n\n\n
JS\uff1a<\/h3>\n\n\n
\nconst canvas = document.getElementById("textCanvas");\nconst ctx = canvas.getContext("2d");\n\ncanvas.width = 600;\ncanvas.height = 200;\n\nctx.font = "18px Arial";\nctx.fillStyle = "#333";\nctx.fillText("\u6b64\u5185\u5bb9\u5df2\u8f6c\u4e3aCanvas\u65e0\u6cd5\u76f4\u63a5\u590d\u5236", 20, 60);\n\n<\/pre><\/div>\n\n\n
\u4f18\u70b9<\/h3>\n\n\n\n
\u2714 \u6587\u672c\u65e0\u6cd5\u9009\u4e2d\u590d\u5236
\u2714 F12 \u67e5\u770b\u4e5f\u662f\u56fe\u7247
\u2714 \u722c\u866b\u4e5f\u62ff\u4e0d\u5230\u6587\u5b57\u5185\u5bb9<\/p>\n\n\n\n
\u7f3a\u70b9<\/h3>\n\n\n\n
\u274c \u53ef\u88ab OCR \u56fe\u7247\u8bc6\u522b\u7ed5\u8fc7
\u274c \u9700\u8981\u989d\u5916\u6e32\u67d3\u6210\u672c
\u274c \u4e0d\u4fbf\u4e8e SEO<\/p>\n\n\n\n
\ud83d\udccc \u9002\u7528\u4e8e\u8bfe\u7a0b\u4ed8\u8d39\u9875\u3001\u7535\u5b50\u4e66\u9884\u89c8\u3001\u8003\u8bd5\u9898\u7b49\u9700\u8981\u8f83\u5f3a\u4fdd\u62a4\u3002<\/strong><\/p>\n\n\n\n
\n\n\n\n
5\ufe0f\u20e3 WebGL\/Canvas \u52a0\u5bc6\u6e32\u67d3\uff08\u51e0\u4e4e\u201c\u771f\u9632\u590d\u5236\u201d\uff09<\/h1>\n\n\n\n
\u8fd9\u662f\u9ad8\u7aef\u65b9\u6848\uff0c\u6536\u8d39\u7535\u5b50\u4e66\u5e73\u53f0\u3001\u5728\u7ebf\u8bd5\u9898\u5e73\u53f0\u5e38\u7528\u3002<\/p>\n\n\n\n
\u539f\u7406\uff1a<\/h2>\n\n\n\n
\u2714 \u6587\u672c\u4e0d\u518d\u4ee5 DOM \u5b58\u5728
\u2714 \u5ba2\u6237\u7aef\u4e0d\u4fdd\u5b58\u660e\u6587\uff0c\u670d\u52a1\u7aef\u7b7e\u540d
\u2714 \u5185\u5bb9\u88ab WebGL \u6216 Canvas \u52a0\u5bc6\u6e32\u67d3
\u2714 \u590d\u5236\u3001DOM \u6293\u53d6\u5747\u65e0\u6548
\u2714 \u622a\u56fe\u4e5f\u53ef\u901a\u8fc7\u6c34\u5370+\u884c\u4e3a\u68c0\u6d4b\u6765\u9650\u5236<\/p>\n\n\n\n
\u7b80\u5316\u793a\u4f8b\uff1a<\/h3>\n\n\n
\nconst canvas = document.getElementById("secure");\nconst ctx = canvas.getContext("2d");\n\nconst encrypted = "m3k8J93asBG..."; \/\/ \u670d\u52a1\u7aef\u7b7e\u540d\u5185\u5bb9\nconst text = decrypt(encrypted); \/\/ \u672c\u5730\u89e3\u5bc6\uff08sessionkey\uff09\n\nctx.fillText(text, 10, 50);\n\n<\/pre><\/div>\n\n\n
\n
\u771f\u6b63\u5b9e\u73b0\u4e2d\u4e0d\u4f1a\u76f4\u63a5\u5728\u5ba2\u6237\u7aef\u89e3\u5bc6\uff0c\u800c\u662f\u4f7f\u7528 WebAssembly \/ Shader \u5199\u5165\u50cf\u7d20\u3002<\/p>\n<\/blockquote>\n\n\n\n
\u4f18\u70b9<\/h3>\n\n\n\n
\u2714 \u975e\u5e38\u96be\u590d\u5236
\u2714 DOM \u5185\u6ca1\u6709\u771f\u5b9e\u6587\u672c
\u2714 \u5373\u4f7f\u9006\u5411\u4e5f\u5f88\u96be\u6062\u590d\u539f\u6587<\/p>\n\n\n\n
\u7f3a\u70b9<\/h3>\n\n\n\n
\u274c \u6210\u672c\u9ad8
\u274c SEO \u4e0d\u652f\u6301
\u274c \u5bf9\u7ec8\u7aef\u6027\u80fd\u8981\u6c42\u9ad8<\/p>\n\n\n\n
\ud83d\udccc \u9002\u7528\u4e8e\u9ad8\u4ef7\u503c\u5185\u5bb9\uff08\u4ed8\u8d39\u6559\u6750\u3001\u654f\u611f\u57f9\u8bad\u5185\u5bb9\u3001\u8003\u8bd5\u7cfb\u7edf\uff09\u3002<\/strong><\/p>\n\n\n\n
\n\n\n\n
\ud83d\udccc \u6700\u7ec8\u5bf9\u6bd4\u603b\u7ed3<\/h1>\n\n\n\n
\u65b9\u6848<\/th>\u9632\u590d\u5236\u7b49\u7ea7<\/th>\u6210\u672c<\/th>\u63a8\u8350\u7a0b\u5ea6<\/th><\/tr><\/thead>
CSS \u7981\u9009<\/td>\u2605\u2605<\/td>\u4f4e<\/td>\u2b50\u2b50\u2b50<\/td><\/tr>
\u7981\u53f3\u952e+\u5feb\u6377\u952e<\/td>\u2605\u2605\u2605<\/td>\u4f4e<\/td>\u2b50\u2b50\u2b50<\/td><\/tr>
JS \u62e6\u622a copy<\/td>\u2605\u2605\u2605\u2605<\/td>\u4e2d<\/td>\u2b50\u2b50\u2b50\u2b50<\/td><\/tr>
Canvas \u6587\u672c\u6e32\u67d3<\/td>\u2605\u2605\u2605\u2605\u2605<\/td>\u4e2d<\/td>\u2b50\u2b50\u2b50\u2b50\u2b50<\/td><\/tr>
WebGL \/ WASM \u52a0\u5bc6\u6e32\u67d3<\/td>\u2605\u2605\u2605\u2605\u2605+<\/td>\u9ad8<\/td>\u2b50\u2b50\u2b50\u2b50\u2b50\uff08\u5b89\u5168\u6700\u5f3a\uff09<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n
\ud83d\udd25 \u7ed9\u4f60\u4e00\u4e2a\u7ec4\u5408\u65b9\u6848\uff08\u9002\u5408\u5927\u90e8\u5206\u7f51\u7ad9\uff09<\/h1>\n\n\n
\n&lt;body oncontextmenu="return false" onselectstart="return false">&lt;\/body>\n\n<\/pre><\/div>\n\n
\ndocument.addEventListener('copy', e => e.preventDefault());\ndocument.addEventListener('cut', e => e.preventDefault());\ndocument.addEventListener('keydown', e => {\n  if (e.ctrlKey &amp;&amp; ['c','u','s','a','x'].includes(e.key.toLowerCase())) {\n    e.preventDefault();\n  }\n});\n\n<\/pre><\/div>\n\n\n
\u2714 \u8f7b\u91cf
\u2714 \u517c\u5bb9\u6027\u597d
\u2714 \u5bf9\u666e\u901a\u7528\u6237\u6709\u6548<\/p>\n","protected":false},"excerpt":{"rendered":"
\u4e0b\u9762\u7ed9\u4f60\u6574\u7406\u4e00\u4efd \u524d\u7aef\u9632\u590d\u5236\uff08\u7981\u7528\u590d\u5236\/\u7c98\u8d34\/\u9009\u62e9\/\u53f3\u952e\u7b49\uff09\u7684 5 \u79cd\u4e3b\u6d41\u65b9\u6848\u6548… Continue Reading →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49],"tags":[],"class_list":["post-512","post","type-post","status-publish","format-standard","hentry","category-javascript"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/512","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=512"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/512\/revisions"}],"predecessor-version":[{"id":513,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/512\/revisions\/513"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}