{"id":10001220,"date":"2025-09-03T09:00:00","date_gmt":"2025-09-03T01:00:00","guid":{"rendered":"http:\/\/axure.in\/?p=10001220"},"modified":"2025-09-03T09:25:57","modified_gmt":"2025-09-03T01:25:57","slug":"axure%e4%b8%ad%e5%ae%9e%e7%8e%b0%e6%89%8b%e5%86%99%e7%ad%be%e5%90%8d%e5%8a%9f%e8%83%bd%ef%bc%88%e9%9d%9ejs%e6%b3%a8%e5%85%a5%ef%bc%89","status":"publish","type":"post","link":"http:\/\/axure.in\/?p=10001220","title":{"rendered":"Axure\u4e2d\u5b9e\u73b0\u624b\u5199\u7b7e\u540d\u529f\u80fd\uff08\u975eJS\u6ce8\u5165\uff09"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\u524d\u8a00\uff1a<\/h2>\n\n\n\n<p>\u76ee\u524d\u7f51\u7edc\u4e0a\u7edd\u5927\u591a\u6570\u7535\u5b50\u7b7e\u540d\u65b9\u6848\uff0c\u90fd\u4f9d\u8d56\u4e8e\u76f4\u63a5\u6ce8\u5165 JavaScript \u811a\u672c\u5e76\u8c03\u7528 Canvas \u5143\u7d20\u6765\u5b9e\u73b0\u3002\u8fd9\u79cd\u65b9\u5f0f\u867d\u7136\u529f\u80fd\u5f3a\u5927\u7075\u6d3b\uff0c\u4f46\u5bf9\u4e8e\u4e0d\u5177\u5907\u7f16\u7a0b\u80cc\u666f\u7684\u8bbe\u8ba1\u5e08\u548c\u4ea7\u54c1\u7ecf\u7406\u800c\u8a00\uff0c\u82e5\u8981\u8c03\u6574\u6837\u5f0f\u3001\u4ea4\u4e92\u6216\u6269\u5c55\u529f\u80fd\uff0c\u51e0\u4e4e\u65e0\u4ece\u4e0b\u624b\u3002\u8fd9\u4f7f\u5f97\u672c\u5e94\u7075\u6d3b\u6613\u7528\u7684\u7b7e\u540d\u7ec4\u4ef6\uff0c\u53d8\u6210\u4e86\u4e00\u9053\u6280\u672f\u9e3f\u6c9f\uff0c\u4e25\u91cd\u9650\u5236\u4e86\u8bbe\u8ba1\u521b\u610f\u548c\u4ea7\u54c1\u81ea\u5b9a\u4e49\u7684\u53d1\u6325\u7a7a\u95f4\u3002<\/p>\n\n\n\n<p><strong>\u7b7e\u5b57\uff0c\u662f\u627f\u8bfa\u7684\u7ec8\u6781\u5f62\u6001\uff0c\u662f\u7ec8\u7ed3\u4e0e\u5f00\u542f\u7684\u5206\u754c\uff0c\u662f\u79e9\u5e8f\u4e0e\u8d23\u4efb\u7684\u94c1\u8bc1\u3002<\/strong><br><strong>\u4e00\u7b7e\u4e00\u8bfa\uff0c\u91cd\u82e5\u5343\u94a7\u3002<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"720\" src=\"http:\/\/axure.in\/wp-content\/uploads\/2025\/09\/TB5-Edward-Lengel.jpeg\" alt=\"\" class=\"wp-image-10001289\" srcset=\"http:\/\/axure.in\/wp-content\/uploads\/2025\/09\/TB5-Edward-Lengel.jpeg 960w, http:\/\/axure.in\/wp-content\/uploads\/2025\/09\/TB5-Edward-Lengel-300x225.jpeg 300w, http:\/\/axure.in\/wp-content\/uploads\/2025\/09\/TB5-Edward-Lengel-768x576.jpeg 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u9884\u89c8\uff1a<\/h2>\n\n\n\n<p>\u9884\u89c8\u5730\u5740\uff1a<a href=\"https:\/\/usrsky.axshare.com\/#id=w2dd4f&amp;g=1\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/usrsky.axshare.com\/#id=w2dd4f&amp;g=1<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"485\" height=\"387\" src=\"http:\/\/axure.in\/wp-content\/uploads\/2025\/09\/\u5f55\u5236_2025_09_01_11_41_13_382.gif\" alt=\"\" class=\"wp-image-10001286\"\/><\/figure>\n\n\n\n<p>\u53ef\u4ee5\u770b\u51fa\uff0c\u7b14\u8ff9\u4e66\u5199\u975e\u5e38\u6d41\u7545\uff0c\u5168\u7a0b\u6beb\u65e0\u5361\u987f\u4e0e\u5ef6\u8fdf\uff0c\u771f\u5b9e\u8fd8\u539f\u7eb8\u4e0a\u4e66\u5199\u7684\u8ddf\u624b\u611f\u3002\u7ebf\u6761\u8fc7\u6e21\u81ea\u7136\u67d4\u548c\uff0c\u65e0\u751f\u786c\u5c16\u9510\u4e4b\u611f\uff0c\u6574\u4f53\u89c6\u89c9\u6548\u679c\u8212\u9002\u4f18\u96c5\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u539f\u7406\uff1a<\/h2>\n\n\n\n<p>\u5982\u679c\u4e0d\u501f\u52a9JS\u548cCanvas\uff0c\u8fd8\u9700\u8981\u52a8\u6001\u751f\u6210\u56fe\u7247\uff0c\u90a3\u4e48SVG\uff08Scalable Vector Graphics\uff09\u5c31\u975e\u5e38\u9002\u5408\u3002<br>SVG\u57fa\u672c\u5f62\u72b6\u4e2d<a href=\"https:\/\/developer.mozilla.org\/zh-CN\/docs\/Web\/SVG\/Tutorials\/SVG_from_scratch\/Paths\" target=\"_blank\" rel=\"noreferrer noopener\">&lt;path&gt;<\/a>\u5143\u7d20\u662f\u6700\u5f3a\u5927\u7684\u4e00\u4e2a\uff0c\u4f60\u53ef\u4ee5\u7528\u4e00\u884c\u4ee3\u7801\u521b\u5efa\u4efb\u610f\u5f62\u72b6\uff08\u7ebf\u6761\u3001\u66f2\u7ebf\u3001\u5f27\u5f62\u7b49\u7b49\uff09\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u51c6\u5907\uff1a<\/h2>\n\n\n\n<p>\u6211\u4eec\u9700\u8981\u51c6\u5907\u4e00\u4e2a\u52a8\u6001\u9762\u677f\u3002\u52a8\u6001\u9762\u677f\u5185\u90e8\u653e\u4e00\u5f20\u56fe\u7247\uff0c\u4e24\u4e2a\u6587\u672c\u57df\uff08sign\u548cdrawing\uff09\u3002\u52a8\u6001\u9762\u677f\u5916\u9762\u653e\u4e00\u4e2a\u201c\u91cd\u7f6e\u201d\u6309\u94ae\u3002<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"689\" height=\"349\" src=\"http:\/\/axure.in\/wp-content\/uploads\/2025\/08\/image-11.png\" alt=\"\" class=\"wp-image-10001264\" srcset=\"http:\/\/axure.in\/wp-content\/uploads\/2025\/08\/image-11.png 689w, http:\/\/axure.in\/wp-content\/uploads\/2025\/08\/image-11-300x152.png 300w\" sizes=\"auto, (max-width: 689px) 100vw, 689px\" \/><\/figure>\n<\/div>\n\n\n<p>\u7ed3\u6784\u5982\u4e0b\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u52a8\u6001\u9762\u677f\uff1a\u81ea\u9002\u5e94\u5185\u5bb9\uff0c\u5982\u8bbe\u7f6e\u80cc\u666f\u8272\u548c\u8fb9\u6846\u6837\u5f0f\u5373\u4e3a\u7b7e\u5b57\u677f\u7684\u80cc\u666f\u548c\u8fb9\u6846\u3002\n<ul class=\"wp-block-list\">\n<li>\u56fe\u7247\uff1aX:0 Y:0 \u5bbd\u5ea6\u9ad8\u5ea6\u81ea\u5df1\u5b9a\u3002<\/li>\n\n\n\n<li>\u6587\u672c\u57dfsign\uff1aX:0 Y:0 W:1 H:1 \u9690\u85cf\u3002<\/li>\n\n\n\n<li>\u6587\u672c\u57dfdrawing\uff1aX:0 Y:0 W:1 H:1 \u9690\u85cf\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u91cd\u7f6e\u6309\u94ae<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u4ea4\u4e92\uff1a<\/h2>\n\n\n\n<p>\u6587\u4ef6\u57dfsign\u7684\u4ea4\u4e92\u5982\u4e0b\uff1a<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"287\" src=\"http:\/\/axure.in\/wp-content\/uploads\/2025\/08\/image-12.png\" alt=\"\" class=\"wp-image-10001268\" srcset=\"http:\/\/axure.in\/wp-content\/uploads\/2025\/08\/image-12.png 700w, http:\/\/axure.in\/wp-content\/uploads\/2025\/08\/image-12-300x123.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n\n<p>\u8f7d\u5165\u65f6[\u8bbe\u7f6e\u6587\u672c]\u7684\u5185\u5bb9\u4e3a\uff1a<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"472\" src=\"http:\/\/axure.in\/wp-content\/uploads\/2025\/08\/image-13.png\" alt=\"\" class=\"wp-image-10001269\" srcset=\"http:\/\/axure.in\/wp-content\/uploads\/2025\/08\/image-13.png 700w, http:\/\/axure.in\/wp-content\/uploads\/2025\/08\/image-13-300x202.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n\n<p>\u6587\u4ef6\u57dfdrawing\u7684\u4ea4\u4e92\u5982\u4e0b\uff1a<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"271\" src=\"http:\/\/axure.in\/wp-content\/uploads\/2025\/08\/image-14.png\" alt=\"\" class=\"wp-image-10001273\" srcset=\"http:\/\/axure.in\/wp-content\/uploads\/2025\/08\/image-14.png 700w, http:\/\/axure.in\/wp-content\/uploads\/2025\/08\/image-14-300x116.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n\n<p>\u52a8\u6001\u9762\u677f\u7684\u4ea4\u4e92\u5982\u4e0b\uff1a<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"606\" src=\"http:\/\/axure.in\/wp-content\/uploads\/2025\/08\/image-15.png\" alt=\"\" class=\"wp-image-10001275\" srcset=\"http:\/\/axure.in\/wp-content\/uploads\/2025\/08\/image-15.png 700w, http:\/\/axure.in\/wp-content\/uploads\/2025\/08\/image-15-300x260.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n\n<p>\u62d6\u52a8\u7ed3\u675f\u65f6[\u8bbe\u7f6e\u6587\u672c]\u7684\u5185\u5bb9\u4e3a\uff1a<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"472\" src=\"http:\/\/axure.in\/wp-content\/uploads\/2025\/08\/image-16.png\" alt=\"\" class=\"wp-image-10001276\" srcset=\"http:\/\/axure.in\/wp-content\/uploads\/2025\/08\/image-16.png 700w, http:\/\/axure.in\/wp-content\/uploads\/2025\/08\/image-16-300x202.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n\n<p>\u91cd\u7f6e\u6309\u94ae\u7684\u4ea4\u4e92\u4e3a\uff1a<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"238\" src=\"http:\/\/axure.in\/wp-content\/uploads\/2025\/08\/image-17.png\" alt=\"\" class=\"wp-image-10001277\" srcset=\"http:\/\/axure.in\/wp-content\/uploads\/2025\/08\/image-17.png 700w, http:\/\/axure.in\/wp-content\/uploads\/2025\/08\/image-17-300x102.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n\n<p>\u8fd9\u6837\u4e00\u4e2a\u624b\u5199\u7b7e\u540d\u677f\u5c31\u5b8c\u6210\u4e86\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u6269\u5c55\uff1a<\/h2>\n\n\n\n<p>\u606d\u559c\uff01\u4f60\u5df2\u8fdb\u5165Axure\u7684\u300c\u7ed8\u56fe\u65b0\u7eaa\u5143\u300d\uff0c\u8fd9\u662f\u4e00\u4e2a\u5c5e\u4e8e\u521b\u9020\u8005\u7684\u65b0\u7bc7\u7ae0\uff0c\u6b64\u523b\u8d77\uff0c\u903b\u8f91\u4e0e\u7f8e\u5b66\u5c06\u7531\u4f60\u5b9a\u4e49\uff0c\u65e0\u9650\u53ef\u80fd\u6b63\u5f85\u4f60\u6325\u6d12\u521b\u610f\u3002<\/p>\n\n\n\n<p>\u8fd9\u91cc\u4e0d\u4ec5\u662f\u539f\u753b\u7684\u821e\u53f0\uff0c\u66f4\u662f\u65e0\u9650\u53ef\u80fd\u7684\u521b\u9020\u5de5\u5382\uff01\u8fd9\u4e00\u529f\u80fd\u53ef\u7075\u6d3b\u6269\u5c55\u4e3a\u591a\u79cd\u5b9e\u7528\u573a\u666f\uff0c\u4f8b\u5982\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u753b\u56fe\u677f<\/strong>\uff1a\u81ea\u7531\u7ed8\u5236\u521b\u610f\u7075\u611f\uff0c\u8f7b\u677e\u8868\u8fbe\u8bbe\u8ba1\u601d\u8def<br><a href=\"https:\/\/usrsky.axshare.com\/#id=7kgfjw&amp;g=1\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/usrsky.axshare.com\/#id=7kgfjw&amp;g=1<\/a><\/li>\n\n\n\n<li><strong>\u4f5c\u4e1a\u6279\u6539<\/strong>\uff1a\u76f4\u63a5\u5728\u539f\u578b\u4e0a\u6279\u6ce8\u53cd\u9988\uff0c\u6c9f\u901a\u66f4\u76f4\u89c2\u3001\u4fee\u6539\u66f4\u9ad8\u6548<\/li>\n\n\n\n<li><strong>\u6587\u6863\u6279\u6ce8<\/strong>\uff1a\u50cf\u5728\u7eb8\u4e0a\u4e00\u6837\u6807\u8bb0\u91cd\u70b9\uff0c\u8ba9\u8bf4\u660e\u6587\u6863\u4e5f\u53d8\u5f97\u751f\u52a8\u8d77\u6765<\/li>\n\n\n\n<li><strong>\u5730\u56fe\u6807\u8bb0<\/strong>\uff1a\u5feb\u901f\u6807\u6ce8\u52a8\u7ebf\u3001\u533a\u57df\uff0c\u89c4\u5212\u7528\u6237\u8def\u5f84\u4e00\u76ee\u4e86\u7136<\/li>\n\n\n\n<li>\u2026\u8fd8\u6709\u66f4\u591a\u73a9\u6cd5\u7b49\u4f60\u53d1\u6398\uff01<\/li>\n<\/ul>\n\n\n\n<p>\u65e0\u8bba\u662f\u6d41\u7a0b\u793a\u610f\u3001UI\u8349\u56fe\uff0c\u8fd8\u662f\u4e92\u52a8\u6f14\u793a\uff0c\u624b\u52a8\u7ed8\u56fe\u90fd\u80fd\u6210\u4e3a\u4f60\u7684\u5f97\u529b\u52a9\u624b\u3002\u53d1\u6325\u521b\u610f\uff0c\u52a8\u624b\u8bd5\u8bd5\u5427 \u2014\u2014 \u610f\u60f3\u4e0d\u5230\u7684\u7ed8\u56fe\u4f53\u9a8c\uff0c\u6b63\u7b49\u4f60\u6765\u63a2\u7d22\uff01<\/p>\n<p>\u8f6c\u8f7d\u8bf7\u6ce8\u660e\uff1a<a href=\"http:\/\/axure.in\">\u6700In\u306eAxure<\/a> &raquo; <a href=\"http:\/\/axure.in\/?p=10001220\">Axure\u4e2d\u5b9e\u73b0\u624b\u5199\u7b7e\u540d\u529f\u80fd\uff08\u975eJS\u6ce8\u5165\uff09<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>\u524d\u8a00\uff1a \u76ee\u524d\u7f51\u7edc\u4e0a\u7edd\u5927\u591a\u6570\u7535\u5b50\u7b7e\u540d\u65b9\u6848\uff0c\u90fd\u4f9d\u8d56\u4e8e\u76f4\u63a5\u6ce8\u5165 JavaScript \u811a\u672c\u5e76\u8c03\u7528 Canvas \u5143\u7d20\u6765\u5b9e\u73b0\u3002\u8fd9\u79cd\u65b9\u5f0f\u867d\u7136\u529f\u80fd\u5f3a\u5927\u7075\u6d3b\uff0c\u4f46\u5bf9\u4e8e\u4e0d\u5177\u5907\u7f16\u7a0b\u80cc\u666f\u7684\u8bbe\u8ba1\u5e08\u548c\u4ea7\u54c1\u7ecf\u7406\u800c\u8a00\uff0c\u82e5\u8981\u8c03\u6574\u6837\u5f0f\u3001\u4ea4\u4e92\u6216\u6269\u5c55\u529f\u80fd\uff0c\u51e0\u4e4e\u65e0\u4ece\u4e0b\u624b\u3002\u8fd9\u4f7f\u5f97\u672c\u5e94\u7075\u6d3b\u6613\u7528 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":10001289,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[38],"tags":[223,224],"class_list":["post-10001220","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-intermediate-tutorial","tag-223","tag-224"],"_links":{"self":[{"href":"http:\/\/axure.in\/index.php?rest_route=\/wp\/v2\/posts\/10001220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/axure.in\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/axure.in\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/axure.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/axure.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10001220"}],"version-history":[{"count":22,"href":"http:\/\/axure.in\/index.php?rest_route=\/wp\/v2\/posts\/10001220\/revisions"}],"predecessor-version":[{"id":10001293,"href":"http:\/\/axure.in\/index.php?rest_route=\/wp\/v2\/posts\/10001220\/revisions\/10001293"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/axure.in\/index.php?rest_route=\/wp\/v2\/media\/10001289"}],"wp:attachment":[{"href":"http:\/\/axure.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10001220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/axure.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=10001220"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/axure.in\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=10001220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}