{"id":431,"date":"2019-01-31T23:40:06","date_gmt":"2019-01-31T15:40:06","guid":{"rendered":"https:\/\/wp.winter-weng.cc\/work\/?p=431"},"modified":"2019-01-31T23:40:06","modified_gmt":"2019-01-31T15:40:06","slug":"canvas-%e7%89%a9%e7%90%86%e5%9f%ba%e7%a4%8e%e3%80%81%e5%90%91%e9%87%8f","status":"publish","type":"post","link":"https:\/\/wp.winter-weng.cc\/work\/?p=431","title":{"rendered":"Canvas \u7269\u7406\u57fa\u790e\u3001\u5411\u91cf"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_75 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u986f\u793a\/\u96b1\u85cf\u5167\u5bb9\u76ee\u9304\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/wp.winter-weng.cc\/work\/?p=431\/#%E7%89%A9%E7%90%86%E5%9F%BA%E7%A4%8E\" >\u7269\u7406\u57fa\u790e<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/wp.winter-weng.cc\/work\/?p=431\/#%E5%90%91%E9%87%8F\" >\u5411\u91cf<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/wp.winter-weng.cc\/work\/?p=431\/#Project_%E2%80%93_%E8%B2%AA%E5%90%83%E8%9B%87\" >Project &#8211; \u8caa\u5403\u86c7<\/a><\/li><\/ul><\/nav><\/div>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>\u5167\u5bb9\u53ca\u5be6\u4f5c\u4f86\u81ea\u5433\u54f2\u5b87\u300a<a href=\"https:\/\/hahow.in\/courses\/586fae97a8aae907000ce721\/main\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"\u52d5\u756b\u4e92\u52d5\u7db2\u9801\u7279\u6548\u5165\u9580\uff08JS\/CANVAS\uff09 (\u5728\u65b0\u5206\u9801\u4e2d\u958b\u555f)\">\u52d5\u756b\u4e92\u52d5\u7db2\u9801\u7279\u6548\u5165\u9580\uff08JS\/CANVAS\uff09<\/a>\u300b<\/p><p><\/p><\/blockquote>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E7%89%A9%E7%90%86%E5%9F%BA%E7%A4%8E\"><\/span><strong>\u7269\u7406\u57fa\u790e<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p>\u6709\u6642\u5019\u6211\u5011\u4e26\u4e0d\u4e00\u5b9a\u8981\u6307\u5b9a\u5750\u6a19\u9ede\u4f86\u7e6a\u88fd\u7269\u4ef6\uff0c\u800c\u53ef\u4ee5\u6539\u7531\u7d66\u4e88\u901f\u5ea6\u7684\u65b9\u5f0f\uff0c\u4e0d\u65b7\u5730\u8b8a\u52d5\u7269\u4ef6\u7684\u4f4d\u7f6e\u3002\u800c\u7d66\u4e88\u52a0\u901f\u5ea6\u548c\u6469\u64e6\u529b\u5247\u53ef\u4ee5\u6a21\u64ec\u73fe\u5be6\u4e2d\u5be6\u969b\u7269\u9ad4\u7684\u79fb\u52d5\uff0c\u50cf\u662f\u91cd\u529b\u6216\u662f\u62cb\u7269\u7dda\u7684\u5448\u73fe\u3002<\/p>\n\n\n<p><a rel=\"noreferrer noopener\" aria-label=\"dat.GUI (\u5728\u65b0\u5206\u9801\u4e2d\u958b\u555f)\" href=\"http:\/\/workshop.chromeexperiments.com\/examples\/gui\/#1--Basic-Usage\" target=\"_blank\">dat.GUI<\/a> \u662f\u4e00\u500b\u53ef\u4ee5\u900f\u904e GUI \u4ecb\u9762\u4f86\u64cd\u63a7\u8b8a\u6578\u7684\u5957\u4ef6\uff0c\u85c9\u7531\u7d81\u5b9a\u7269\u4ef6\u7684\u5c6c\u6027\uff0c\u5957\u4ef6\u6703\u6839\u64da\u8cc7\u6599\u7684\u578b\u614b\u7522\u51fa\u76f8\u5c0d\u61c9\u7684\u63a7\u5236\u5143\u4ef6\uff0c\u4e26\u53ef\u4ee5\u76e3\u807d\u8b8a\u6578\u7684\u8b8a\u5316\uff0c\u64b0\u5beb\u5c0d\u61c9\u7684 callback\u3002<\/p>\n\n\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"js,result\" data-user=\"yichinweng\" data-slug-hash=\"gqMYpE\" style=\"height: 265px;align-items: center;justify-content: center;border: 2px solid black;margin: 1em 0;padding: 1em\" data-pen-title=\"\u52d5\u756b\u4e92\u52d5\u7db2\u9801\u7279\u6548 ch47. Canvas\u8207\u7279\u6548\u52d5\u756b- \u7269\u7406\u57fa\u790e(\u901f\u5ea6 \/ \u52a0\u901f\u5ea6)\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/yichinweng\/pen\/gqMYpE\/\">\n  \u52d5\u756b\u4e92\u52d5\u7db2\u9801\u7279\u6548 ch47. Canvas\u8207\u7279\u6548\u52d5\u756b- \u7269\u7406\u57fa\u790e(\u901f\u5ea6 \/ \u52a0\u901f\u5ea6)<\/a> by Winter (<a href=\"https:\/\/codepen.io\/yichinweng\">@yichinweng<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E5%90%91%E9%87%8F\"><\/span><strong>\u5411\u91cf<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p>\u5728\u63cf\u8ff0\u4e00\u500b\u5ea7\u6a19\u7684\u6642\u5019\uff0c\u9664\u4e86\u76f4\u63a5\u6307\u5b9a\u4f4d\u7f6e\u4e4b\u5916\uff0c\u4e5f\u53ef\u4ee5\u5c07\u5176\u770b\u6210\u662f\u5169\u500b\u5206\u91cf\u6240\u805a\u96c6\u8d77\u4f86\u7684\u5206\u91cf\u3002\u4f8b\u5982 (3, 4)\uff0c\u53ef\u4ee5\u88ab\u8996\u70ba\u662f x \u65b9\u5411 +3 \u548c y \u65b9\u5411 +4 \u6240\u7d44\u6210\u7684\u5411\u91cf\uff0c\u4e26\u4e14\u53ef\u4ee5\u5c0d\u8b8a\u5316\u91cf\u9032\u884c\u52a0\u6e1b\u4e58\u9664\u3001\u8a08\u7b97\u9577\u5ea6\u7b49\u7b49\u64cd\u4f5c\u3002<\/p>\n\n\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"js,result\" data-user=\"yichinweng\" data-slug-hash=\"pGbXaa\" style=\"height: 265px;align-items: center;justify-content: center;border: 2px solid black;margin: 1em 0;padding: 1em\" data-pen-title=\"\u52d5\u756b\u4e92\u52d5\u7db2\u9801\u7279\u6548 ch48. Canvas\u8207\u7279\u6548\u52d5\u756b- Vector \u5411\u91cf\u7684\u6982\u5ff5\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/yichinweng\/pen\/pGbXaa\/\">\n  \u52d5\u756b\u4e92\u52d5\u7db2\u9801\u7279\u6548 ch48. Canvas\u8207\u7279\u6548\u52d5\u756b- Vector \u5411\u91cf\u7684\u6982\u5ff5<\/a> by Winter (<a href=\"https:\/\/codepen.io\/yichinweng\">@yichinweng<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"js,result\" data-user=\"yichinweng\" data-slug-hash=\"vbXOrv\" style=\"height: 265px;align-items: center;justify-content: center;border: 2px solid black;margin: 1em 0;padding: 1em\" data-pen-title=\"\u52d5\u756b\u4e92\u52d5\u7db2\u9801\u7279\u6548 ch47. (Vector\u7248) Canvas\u8207\u7279\u6548\u52d5\u756b- \u7269\u7406\u57fa\u790e(\u901f\u5ea6 \/ \u52a0\u901f\u5ea6)\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/yichinweng\/pen\/vbXOrv\/\">\n  \u52d5\u756b\u4e92\u52d5\u7db2\u9801\u7279\u6548 ch47. (Vector\u7248) Canvas\u8207\u7279\u6548\u52d5\u756b- \u7269\u7406\u57fa\u790e(\u901f\u5ea6 \/ \u52a0\u901f\u5ea6)<\/a> by Winter (<a href=\"https:\/\/codepen.io\/yichinweng\">@yichinweng<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Project_%E2%80%93_%E8%B2%AA%E5%90%83%E8%9B%87\"><\/span><strong>Project &#8211; \u8caa\u5403\u86c7<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p>\u900f\u904e\u5411\u91cf\u7269\u4ef6\u7684\u5efa\u7acb\uff0c\u80fd\u5920\u5feb\u901f\u5730\u64cd\u63a7\u7269\u4ef6\u7684\u8b8a\u5316\u3002\u8caa\u5403\u86c7\u7684\u6982\u5ff5\u5176\u5be6\u5c31\u662f\u5c07\u982d\u90e8\u4e0d\u65b7\u5730\u5f80\u524d\u63a8\u9032\uff0c\u540c\u6642\u5728\u66f4\u65b0\u7684\u6642\u5019\u6aa2\u67e5\u9577\u5ea6\u662f\u5426\u904e\u9577\u3001\u662f\u5426\u649e\u5230\u81ea\u5df1\u3001\u8d85\u51fa\u908a\u754c\u6216\u662f\u6709\u6210\u529f\u5403\u5230\u98df\u7269\u3002<\/p>\n\n\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"js,result\" data-user=\"yichinweng\" data-slug-hash=\"VgKPmO\" style=\"height: 265px;align-items: center;justify-content: center;border: 2px solid black;margin: 1em 0;padding: 1em\" data-pen-title=\"\u52d5\u756b\u4e92\u52d5\u7db2\u9801\u7279\u6548 ch49. Canvas\u8207\u7279\u6548\u52d5\u756b- &amp;amp;lt;project 5&amp;amp;rt; \u88fd\u4f5c\u6a6b\u885d\u76f4\u649e\u7684\u8caa\u5403\u86c7\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/yichinweng\/pen\/VgKPmO\/\">\n  \u52d5\u756b\u4e92\u52d5\u7db2\u9801\u7279\u6548 ch49. Canvas\u8207\u7279\u6548\u52d5\u756b- &amp;lt;project 5&amp;rt; \u88fd\u4f5c\u6a6b\u885d\u76f4\u649e\u7684\u8caa\u5403\u86c7<\/a> by Winter (<a href=\"https:\/\/codepen.io\/yichinweng\">@yichinweng<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>\u5167\u5bb9\u53ca\u5be6\u4f5c\u4f86\u81ea\u5433\u54f2\u5b87\u300a\u52d5\u756b\u4e92\u52d5\u7db2\u9801\u7279\u6548\u5165\u9580\uff08JS\/&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"pgc_sgb_lightbox_settings":"","footnotes":""},"categories":[4],"tags":[15,20,21],"class_list":["post-431","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-canvas","tag-html5","tag-javascript"],"_links":{"self":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts\/431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=431"}],"version-history":[{"count":0,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts\/431\/revisions"}],"wp:attachment":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}