{"id":5325,"date":"2026-04-15T07:53:09","date_gmt":"2026-04-14T23:53:09","guid":{"rendered":"https:\/\/yunbroidery.com\/?page_id=5325"},"modified":"2026-04-22T10:16:34","modified_gmt":"2026-04-22T02:16:34","slug":"canvas-206_case-study","status":"publish","type":"page","link":"https:\/\/yunbroidery.com\/en\/canvas-206_case-study\/","title":{"rendered":"Canvas 206_Case Study"},"content":{"rendered":"\n<h1 class=\"wp-block-heading has-text-align-center\">Canvas 206_\u6848\u4f8b\u7814\u7a76<\/h1>\n\n\n\n<p class=\"has-text-align-center\"><em>Canvas 206 \u523a\u7e61\u6848\u4f8b\u7814\u7a76\uff085 Layers \u7cfb\u7d71\uff09<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\">1. \u6982\u8ff0<\/h2>\n\n\n\n<p class=\"has-text-align-center\">Canvas 206 \u70ba\u4e00\u7a2e\u591a\u5c64\u5206\u6563\u5f0f\u523a\u7e61\u7cfb\u7d71\uff0c\u7531\u91cd\u8907\u7684\u65cb\u8f49\u9589\u5408\u55ae\u5143\u69cb\u6210\uff0c\u4e26\u900f\u904e\u55ae\u5143\u4e4b\u9593\u7684\u9023\u63a5\u5f62\u6210\u9ad8\u968e\u7d50\u69cb\u7db2\u7d61\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\">2. \u7d50\u69cb<\/h2>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u5206\u5c64\u591a\u5c64\u5206\u6563\u5f0f\u5faa\u74b0\u7cfb\u7d71\uff085\u5c64\uff09<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\">\u2726\u7b2c 1 \u5c64\uff1a\u5fae\u74b0\u9328\u56fa\u55ae\u5143<br>\u2726\u7b2c 2 \u5c64\uff1a\u65cb\u8f49\u4f4d\u79fb\u5c64<br>\u2726\u7b2c 3 \u5c64\uff1a\u4e92\u9396\u7d50\u69cb\u5c64<br>\u2726\u7b2c 4 \u5c64\uff1a\u9023\u63a5\u5668\u64f4\u5145\u5c64<br>\u2726\u7b2c 5 \u5c64\uff1a\u6574\u9ad4\u5f35\u529b\u63a7\u5236\u5c64<\/p>\n\n\n\n<p class=\"has-text-align-center\">\u6b64\u7d50\u69cb\u7531\u4e94\u5c64\u69cb\u6210\uff0c\u5f9e\u5c40\u90e8\u9589\u5408\u55ae\u5143\u9010\u6b65\u64f4\u5c55\u81f3\u6574\u9ad4\u5f35\u529b\u63a7\u5236\uff0c\u5f62\u6210\u5c64\u7d1a\u5f0f\u7d50\u69cb\u7cfb\u7d71\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\">3. \u8def\u5f91<\/h2>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u6df7\u5408\u591a\u74b0\u7db2\u8def\u8def\u5f91<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\">\u2726\u9589\u74b0\uff1a\u5f62\u6210\u7368\u7acb\u7684\u53ef\u898b\u55ae\u5143<br>\u2726\u53cd\u5411\u9023\u63a5\uff1a\u9023\u63a5\u7cfb\u7d71\u4e2d\u7684\u5404\u500b\u55ae\u5143<br>\u2726\u5206\u4f48\u5f0f\u8def\u7531\uff1a\u975e\u7dda\u6027\u3001\u591a\u65b9\u5411<br>\u8def\u5f91\u7d50\u5408\u591a\u500b\u9589\u5408\u8ff4\u5708\u8207\u80cc\u9762\u9023\u63a5\uff0c\u5f62\u6210\u975e\u7dda\u6027\u3001\u591a\u65b9\u5411\u7684\u7db2\u7d61\u7d50\u69cb\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\">4. \u7cfb\u7d71\u884c\u70ba<\/h2>\n\n\n\n<p class=\"has-text-align-center\">\u7cfb\u7d71\u900f\u904e\u591a\u5c64\u65cb\u8f49\u55ae\u5143\u7684\u4ea4\u932f\u4f5c\u7528\uff0c\u9054\u5230\u5206\u6563\u5f0f\u5f35\u529b\u7a69\u5b9a\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\">5. \u523a\u7e61\u8a9e\u6cd5<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th class=\"has-text-align-center\" data-align=\"center\">\u985e\u5225<\/th><th class=\"has-text-align-center\" data-align=\"center\">\u5b9a\u7fa9<\/th><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">\u7d50\u69cb<\/td><td class=\"has-text-align-center\" data-align=\"center\">\u5206\u5c64\u591a\u5c64\u5206\u6563\u5f0f\u7cfb\u7d71<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">\u8def\u5f91<\/td><td class=\"has-text-align-center\" data-align=\"center\">\u6df7\u5408\u591a\u74b0\u7db2\u7d61<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">\u884c\u70ba<\/td><td class=\"has-text-align-center\" data-align=\"center\">\u5206\u4f48\u5f0f\u5f35\u529b\u7a69\u5b9a<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">\u89d2\u8272<\/td><td class=\"has-text-align-center\" data-align=\"center\">\u6b63\u9762 = \u9328\u5b9a\u55ae\u5143 \/ \u80cc\u9762 = \u7db2\u8def\u9023\u63a5\u5668<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">\u7cfb\u7d71\u985e\u578b<\/td><td class=\"has-text-align-center\" data-align=\"center\">\u55ae\u5143 \u2192 \u53e2\u96c6 \u2192 \u7db2\u8def<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">6. Canvas 206 \u57f7\u884c<strong>\u52d5\u756b<\/strong>\u904e\u7a0b\uff08\u542b\u5c64\u7d1a\u8207\u6b65\u9a5f\u6a19\u8a3b\uff09<\/h2>\n\n\n\n<div style=\"text-align:center;\">\n\n<canvas id=\"c206\" width=\"520\" height=\"520\" style=\"border:1px solid #ccc;\"><\/canvas>\n\n<br><br>\n\n<button onclick=\"play()\">\u25b6 Play<\/button>\n<button onclick=\"pause()\">\u23f8 Pause<\/button>\n<button onclick=\"reset()\">\u27f2 Reset<\/button>\n\n<br><br>\n\n<label><input type=\"checkbox\" checked onchange=\"toggleLayer(1,this)\"> Layer 1 <\/label>\n<label><input type=\"checkbox\" checked onchange=\"toggleLayer(2,this)\"> Layer 2 <\/label>\n<label><input type=\"checkbox\" checked onchange=\"toggleLayer(3,this)\"> Layer 3 <\/label>\n<label><input type=\"checkbox\" checked onchange=\"toggleLayer(4,this)\"> Layer 4 <\/label>\n<label><input type=\"checkbox\" checked onchange=\"toggleLayer(5,this)\"> Layer 5 <\/label>\n\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\nconst canvas = document.getElementById(\"c206\");\nconst ctx = canvas.getContext(\"2d\");\n\nconst size = 9;\nconst margin = 60;\nconst step = (520 - margin*2) \/ (size - 1);\n\nlet nodes = {};\nlet id=1;\n\nfor(let r=0;r<size;r++){\n for(let c=0;c<size;c++){\n  nodes[id]=[\n    margin + c*step,\n    520 - (margin + r*step)\n  ];\n  id++;\n }\n}\n\n\/\/ \ud83d\udd37 \u4f60\u7684\u8cc7\u6599\uff08\u5df2\u52065\u5c64\uff09\nconst path = [{\"from\":\"46\",\"to\":\"78\",\"type\":\"front\",\"layer\":1},\n{\"from\":\"78\",\"to\":\"36\",\"type\":\"back\",\"layer\":1},\n{\"from\":\"36\",\"to\":\"4\",\"type\":\"front\",\"layer\":1},\n{\"from\":\"4\",\"to\":\"46\",\"type\":\"back\",\"layer\":1},\n{\"from\":\"46\",\"to\":\"4\",\"type\":\"front\",\"layer\":1},\n{\"from\":\"4\",\"to\":\"36\",\"type\":\"back\",\"layer\":1},\n{\"from\":\"36\",\"to\":\"78\",\"type\":\"front\",\"layer\":1},\n{\"from\":\"78\",\"to\":\"37\",\"type\":\"back\",\"layer\":2},\n{\"from\":\"37\",\"to\":\"77\",\"type\":\"front\",\"layer\":2},\n{\"from\":\"77\",\"to\":\"45\",\"type\":\"back\",\"layer\":2},\n{\"from\":\"45\",\"to\":\"5\",\"type\":\"front\",\"layer\":2},\n{\"from\":\"5\",\"to\":\"37\",\"type\":\"back\",\"layer\":2},\n{\"from\":\"37\",\"to\":\"5\",\"type\":\"front\",\"layer\":2},\n{\"from\":\"5\",\"to\":\"45\",\"type\":\"back\",\"layer\":2},\n{\"from\":\"45\",\"to\":\"77\",\"type\":\"front\",\"layer\":2},\n{\"from\":\"77\",\"to\":\"76\",\"type\":\"back\",\"layer\":3},\n{\"from\":\"76\",\"to\":\"54\",\"type\":\"front\",\"layer\":3},\n{\"from\":\"54\",\"to\":\"6\",\"type\":\"back\",\"layer\":3},\n{\"from\":\"6\",\"to\":\"28\",\"type\":\"front\",\"layer\":3},\n{\"from\":\"28\",\"to\":\"76\",\"type\":\"back\",\"layer\":3},\n{\"from\":\"76\",\"to\":\"28\",\"type\":\"front\",\"layer\":3},\n{\"from\":\"28\",\"to\":\"6\",\"type\":\"back\",\"layer\":3},\n{\"from\":\"6\",\"to\":\"54\",\"type\":\"front\",\"layer\":3},\n{\"from\":\"54\",\"to\":\"62\",\"type\":\"back\",\"layer\":4},\n{\"from\":\"62\",\"to\":\"16\",\"type\":\"front\",\"layer\":4},\n{\"from\":\"16\",\"to\":\"20\",\"type\":\"back\",\"layer\":4},\n{\"from\":\"20\",\"to\":\"66\",\"type\":\"front\",\"layer\":4},\n{\"from\":\"66\",\"to\":\"62\",\"type\":\"back\",\"layer\":4},\n{\"from\":\"62\",\"to\":\"66\",\"type\":\"front\",\"layer\":4},\n{\"from\":\"66\",\"to\":\"20\",\"type\":\"back\",\"layer\":4},\n{\"from\":\"20\",\"to\":\"16\",\"type\":\"front\",\"layer\":4},\n{\"from\":\"16\",\"to\":\"26\",\"type\":\"back\",\"layer\":5},\n{\"from\":\"26\",\"to\":\"12\",\"type\":\"front\",\"layer\":5},\n{\"from\":\"12\",\"to\":\"56\",\"type\":\"back\",\"layer\":5},\n{\"from\":\"56\",\"to\":\"70\",\"type\":\"front\",\"layer\":5},\n{\"from\":\"70\",\"to\":\"26\",\"type\":\"back\",\"layer\":5},\n{\"from\":\"26\",\"to\":\"70\",\"type\":\"front\",\"layer\":5},\n{\"from\":\"70\",\"to\":\"56\",\"type\":\"back\",\"layer\":5},\n{\"from\":\"56\",\"to\":\"12\",\"type\":\"front\",\"layer\":5}]\n;\n\nlet stepIndex=0;\nlet playing=false;\nlet layerVisible = {1:true,2:true,3:true,4:true,5:true};\n\nfunction drawGrid(){\n ctx.clearRect(0,0,520,520);\n\n for(let k in nodes){\n  let [x,y]=nodes[k];\n  ctx.beginPath();\n  ctx.arc(x,y,3,0,Math.PI*2);\n  ctx.fill();\n }\n}\n\nfunction drawArrow(p1,p2,color){\n let dx=p2[0]-p1[0];\n let dy=p2[1]-p1[1];\n let angle=Math.atan2(dy,dx);\n\n ctx.beginPath();\n ctx.moveTo(p2[0],p2[1]);\n ctx.lineTo(p2[0]-10*Math.cos(angle-0.3), p2[1]-10*Math.sin(angle-0.3));\n ctx.lineTo(p2[0]-10*Math.cos(angle+0.3), p2[1]-10*Math.sin(angle+0.3));\n ctx.closePath();\n ctx.fillStyle=color;\n ctx.fill();\n}\n\nfunction draw(){\n drawGrid();\n\n for(let i=0;i<stepIndex;i++){\n  let seg=path[i];\n\n  if(!layerVisible[seg.layer]) continue;\n\n  let p1=nodes[seg.from];\n  let p2=nodes[seg.to];\n\n  ctx.beginPath();\n  ctx.moveTo(p1[0],p1[1]);\n  ctx.lineTo(p2[0],p2[1]);\n\n  let color = seg.layer==1?\"purple\":\"purple\";\n  \n  if(seg.type===\"front\"){\n    ctx.strokeStyle=color;\n    ctx.lineWidth=3;\n    ctx.setLineDash([]);\n    ctx.stroke();\n\n    drawArrow(p1,p2,color);\n\n    \/\/ Step number\n    ctx.fillStyle=color;\n    ctx.fillText(i+1,(p1[0]+p2[0])\/2,(p1[1]+p2[1])\/2);\n\n  }else{\n    ctx.strokeStyle=\"gray\";\n    ctx.lineWidth=1;\n    ctx.setLineDash([4,4]);\n    ctx.stroke();\n  }\n }\n\n ctx.setLineDash([]);\n}\n\nfunction animate(){\n if(!playing) return;\n\n draw();\n stepIndex++;\n\n if(stepIndex<=path.length){\n  setTimeout(animate,400);\n }\n}\n\nwindow.play=function(){\n playing=true;\n animate();\n};\n\nwindow.pause=function(){\n playing=false;\n};\n\nwindow.reset=function(){\n playing=false;\n stepIndex=0;\n draw();\n};\n\nwindow.toggleLayer=function(l,el){\n layerVisible[l]=el.checked;\n draw();\n};\n\ndraw();\n\n});\n<\/script>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\">7. \u80cc\u9762\u7d50\u69cb\u5206\u6790<\/h2>\n\n\n\n<p class=\"has-text-align-center\">\u80cc\u9762\u5448\u73fe\u5bc6\u96c6\u659c\u5411\u9023\u63a5\u7db2\u7d61\uff0c\u4f5c\u70ba\u96b1\u85cf\u7d50\u69cb\u7cfb\u7d71\uff0c\u8ca0\u8cac\u5f35\u529b\u8abf\u7bc0\u8207\u55ae\u5143\u4e4b\u9593\u7684\u9023\u7d50\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\">8. \u7cfb\u7d71\u6bd4\u8f03<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th class=\"has-text-align-center\" data-align=\"center\">Canvas<\/th><th class=\"has-text-align-center\" data-align=\"center\">\u7cfb\u7d71\u985e\u578b<\/th><th class=\"has-text-align-center\" data-align=\"center\">\u5c64<\/th><th class=\"has-text-align-center\" data-align=\"center\">\u8907\u96dc<\/th><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">205<\/td><td class=\"has-text-align-center\" data-align=\"center\">\u55ae\u65cb\u8f49\u8ff4\u8def\u7cfb\u7d71<\/td><td class=\"has-text-align-center\" data-align=\"center\">3<\/td><td class=\"has-text-align-center\" data-align=\"center\">\u4e2d\u7b49\u7684<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">206<\/td><td class=\"has-text-align-center\" data-align=\"center\">\u5206\u6563\u5f0f\u591a\u74b0\u7db2\u7d61<\/td><td class=\"has-text-align-center\" data-align=\"center\">5<\/td><td class=\"has-text-align-center\" data-align=\"center\">\u9ad8\u7684<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\">9. \u5b78\u8853\u5b9a\u7fa9<\/h2>\n\n\n\n<p class=\"has-text-align-center\">\u6b64\u523a\u7e61\u7cfb\u7d71\u5b9a\u7fa9\u70ba\u4e00\u7a2e\u5c64\u7d1a\u5f0f\u591a\u5c64\u5206\u6563\u8ff4\u5708\u7db2\u7d61\uff0c\u900f\u904e\u80cc\u9762\u96b1\u85cf\u8def\u5f91\u9023\u63a5\u65cb\u8f49\u55ae\u5143\uff0c\u5f62\u6210\u5177\u6709\u5f35\u529b\u8abf\u63a7\u7684\u8907\u96dc\u7d50\u69cb\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center\"><strong>\u523a\u7e61\u6587\u6cd5<\/strong><\/h3>\n\n\n\n<p class=\"has-text-align-center\">\u2726\u7d50\u69cb\uff1a<br>\u2726\u8def\u5f91\uff1a<br>\u2726\u7dda\u884c\u70ba\uff1a<br>\u2726\u8a9e\u6cd5\u5c64\u7d1a\uff1a<br>\u2726\u7cfb\u7d71\u7279\u5fb5\uff1a<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Canvas 206_\u6848\u4f8b\u7814\u7a76 Canvas 206 \u523a\u7e61\u6848\u4f8b\u7814\u7a76\uff085 Layers \u7cfb\u7d71\uff09 1. \u6982\u8ff0 Ca [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5325","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/yunbroidery.com\/en\/wp-json\/wp\/v2\/pages\/5325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yunbroidery.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yunbroidery.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yunbroidery.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yunbroidery.com\/en\/wp-json\/wp\/v2\/comments?post=5325"}],"version-history":[{"count":4,"href":"https:\/\/yunbroidery.com\/en\/wp-json\/wp\/v2\/pages\/5325\/revisions"}],"predecessor-version":[{"id":5478,"href":"https:\/\/yunbroidery.com\/en\/wp-json\/wp\/v2\/pages\/5325\/revisions\/5478"}],"wp:attachment":[{"href":"https:\/\/yunbroidery.com\/en\/wp-json\/wp\/v2\/media?parent=5325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}