{"id":80,"date":"2009-05-05T12:56:03","date_gmt":"2009-05-05T04:56:03","guid":{"rendered":"http:\/\/tmp.xujiwei.com\/blog\/?p=80"},"modified":"2010-01-28T23:05:30","modified_gmt":"2010-01-28T15:05:30","slug":"canvas-starts-part2","status":"publish","type":"post","link":"https:\/\/xujiwei.com\/blog\/2009\/05\/canvas-starts-part2\/","title":{"rendered":"HTML5 Canvas \u8d77\u6b65(2) &#8211; \u8def\u5f84"},"content":{"rendered":"<p><a href=\"http:\/\/www.xujiwei.com\/blog\/2009\/04\/20\/canvas-starts-part1\/\">\u4e0a\u4e00\u7bc7<\/a>\u4ecb\u7ecd\u4e86\u00a0HTML5\u00a0\u4e2d\u00a0Canvas\u00a0\u7684\u57fa\u672c\u6982\u5ff5\uff0c\u8fd9\u7bc7\u5c06\u8981\u4ecb\u7ecd\u4e00\u4e0b\u00a0Canvas\u00a0\u4e2d\u7684\u57fa\u672c\u56fe\u5f62\u3002<\/p>\n<p><strong>\u56fe\u5f62\u7684\u57fa\u7840\u00a0-\u00a0\u8def\u5f84<\/strong><\/p>\n<p>\u5728\u00a0Canvas\u00a0\u4e2d\uff0c\u6240\u6709\u57fa\u672c\u56fe\u5f62\u90fd\u662f\u4ee5\u8def\u5f84\u4e3a\u57fa\u7840\u7684\uff0c\u4e5f\u5c31\u662f\u8bf4\uff0c\u6211\u4eec\u5728\u8c03\u7528\u00a02dContext\u00a0\u7684\u00a0lineTo\u3001rect\u00a0\u7b49\u65b9\u6cd5\u65f6\uff0c\u5176\u5b9e\u5c31\u662f\u5f80\u5df2\u7ecf\u7684\u00a0context\u00a0\u8def\u5f84\u96c6\u5408\u4e2d\u518d\u6dfb\u52a0\u4e00\u4e9b\u8def\u5f84\u70b9\uff0c\u5728\u6700\u540e\u4f7f\u7528\u00a0fill\u00a0\u6216\u00a0stroke\u00a0\u65b9\u6cd5\u8fdb\u884c\u7ed8\u5236\u65f6\uff0c\u90fd\u662f\u4f9d\u636e\u8fd9\u4e9b\u8def\u5f84\u70b9\u6765\u8fdb\u884c\u586b\u5145\u6216\u753b\u7ebf\u3002<\/p>\n<p>\u5728\u6bcf\u6b21\u5f00\u59cb\u7ed8\u5236\u8def\u5f84\u524d\uff0c\u90fd\u5e94\u8be5\u4f7f\u7528\u00a0context.beginPath()\u00a0\u65b9\u6cd5\u6765\u544a\u8bc9\u00a0Context\u00a0\u5bf9\u8c61\u5f00\u59cb\u7ed8\u5236\u4e00\u4e2a\u65b0\u7684\u8def\u5f84\uff0c\u5426\u5219\u63a5\u4e0b\u6765\u7ed8\u5236\u7684\u8def\u5f84\u4f1a\u4e0e\u4e4b\u524d\u7ed8\u5236\u7684\u8def\u5f84\u53e0\u52a0\uff0c\u5728\u586b\u5145\u6216\u753b\u8fb9\u6846\u65f6\u5c31\u4f1a\u51fa\u73b0\u95ee\u9898\u3002\u5728\u7ed8\u5236\u5b8c\u6210\u8def\u5f84\u540e\uff0c\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528\u00a0context.closePath()\u00a0\u65b9\u6cd5\u6765\u5173\u95ed\u8def\u5f84\uff0c\u6216\u8005\u624b\u52a8\u5173\u95ed\u8def\u5f84\u3002\u53e6\u5916\uff0c\u5982\u679c\u5728\u586b\u5145\u65f6\u8def\u5f84\u6ca1\u6709\u5173\u95ed\uff0c\u90a3\u4e48\u00a0Context\u00a0\u4f1a\u81ea\u52a8\u8c03\u7528\u00a0closePath\u00a0\u65b9\u6cd5\u5c06\u8def\u5f84\u5173\u95ed\u3002<\/p>\n<p><strong>\u57fa\u672c\u8def\u5f84\u65b9\u6cd5<\/strong><\/p>\n<p><strong>1.\u00a0beginPath,\u00a0closePath<\/strong><\/p>\n<p>\u8fd9\u4e24\u4e2a\u65b9\u6cd5\u5728\u524d\u9762\u5df2\u7ecf\u4ecb\u7ecd\u8fc7\uff0c\u5206\u522b\u7528\u6765\u901a\u77e5\u00a0Context\u00a0\u5f00\u59cb\u4e00\u4e2a\u65b0\u7684\u8def\u5f84\u548c\u5173\u95ed\u5f53\u524d\u7684\u8def\u5f84\u3002<\/p>\n<p>\u5728\u00a0Canvas\u00a0\u4e2d\u4f7f\u7528\u8def\u5f84\u65f6\uff0c\u5e94\u8be5\u8981\u4fdd\u6301\u4e00\u4e2a\u826f\u597d\u7684\u4e60\u60ef\uff0c\u6bcf\u6b21\u5f00\u59cb\u7ed8\u5236\u8def\u5f84\u524d\u90fd\u8981\u8c03\u7528\u4e00\u6b21\u00a0beginPath\u00a0\u65b9\u6cd5\uff0c\u5426\u5219\u753b\u51fa\u6765\u7684\u6548\u679c\u96be\u770b\u4e0d\u8bf4\uff0c\u8fd8\u4f1a\u4e25\u91cd\u5f71\u54cd\u6027\u80fd\u3002<\/p>\n<p>\u5728\u4e0b\u9762\u8fd9\u5f20\u56fe\u4e2d\uff0c\u5de6\u8fb9\u7684\u56fe\u5f62\u5728\u6bcf\u6b21\u7ed8\u5236\u77e9\u5f62\u524d\u90fd\u8c03\u7528\u4e86\u4e00\u6b21\u00a0beginPath\u00a0\u6765\u6e05\u9664\u4e4b\u524d\u7684\u8def\u5f84\u5e76\u91cd\u65b0\u5f00\u59cb\u7ed8\u5236\u65b0\u7684\u8def\u5f84\uff0c\u800c\u540e\u9762\u7684\u56fe\u5f62\u5219\u5c31\u53ea\u5728\u7ed8\u5236\u6240\u6709\u56fe\u5f62\u524d\u8c03\u7528\u4e86\u4e00\u6b21\u00a0beginPath\u00a0\u6765\u6e05\u9664\u8def\u5f84\uff0c\u56e0\u6b64\uff0c\u867d\u7136\u8fd9\u91cc\u662f\u4f7f\u7528\u7684\u8fb9\u6846\u8272\u662f\u00a0#666\uff0c\u4f46\u662f\u53f3\u8fb9\u7684\u56fe\u5f62\u989c\u8272\u6bd4\u5de6\u8fb9\u7684\u6df1\u4e00\u4e9b\uff0c\u56e0\u4e3a\u6bcf\u6b21\u4f7f\u7528\u00a0stroke\u00a0\u7ed8\u5236\u8fb9\u6846\u65f6\uff0c\u4f1a\u628a\u4e4b\u524d\u7684\u8def\u5f84\u518d\u6b21\u7ed8\u5236\u4e00\u904d\uff0c\u53e0\u52a0\u8d77\u6765\u989c\u8272\u5c31\u6bd4\u539f\u6765\u6df1\u4e00\u4e9b\u3002<\/p>\n<p><a rel=\"external\" href=\"http:\/\/picasaweb.google.com\/lh\/photo\/eGvTDyt9pbvbUK6L5xpoEg?authkey=Gv1sRgCNOep9eIh-7m8QE&amp;feat=embedwebsite\"><img src=\"http:\/\/lh3.ggpht.com\/_QJK_LPJoebg\/Sf-nMSM-FGI\/AAAAAAAAAnU\/kd_YrZZObuo\/s800\/2-use-beginpath.jpg\" alt=\"\u56fe\u7247\u9644\u4ef6\" \/><\/a><\/p>\n<pre lang=\"html5strict\">\r\n<div id=\"_mcePaste\">&lt;canvas\u00a0id=\"canvas\"\u00a0width=\"500\"\u00a0height=\"500\"&gt;&lt;\/canvas&gt;\r\n&lt;script\u00a0type=\"text\/javascript\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0var\u00a0canvas\u00a0=\u00a0document.getElementById(\"canvas\");\r\n\u00a0\u00a0\u00a0\u00a0var\u00a0ctx\u00a0=\u00a0canvas.getContext(\"2d\");\r\n\u00a0\u00a0\u00a0\u00a0ctx.strokeStyle\u00a0=\u00a0\"#666\";\r\n\u00a0\u00a0\u00a0\u00a0function\u00a0useBeginPath()\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for\u00a0(var\u00a0i\u00a0=\u00a00;\u00a0i\u00a0&lt;\u00a05;\u00a0++i)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.beginPath();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.rect(10\u00a0+\u00a0i*20,\u00a010\u00a0+\u00a0i*20,\u00a0210\u00a0-\u00a0i*40,\u00a0210\u00a0-\u00a0i*40);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.stroke();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0function\u00a0notUseBeginPath()\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.beginPath();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for\u00a0(var\u00a0i\u00a0=\u00a00;\u00a0i\u00a0&lt;\u00a05;\u00a0++i)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.rect(240\u00a0+\u00a0i*20,\u00a010\u00a0+\u00a0i*20,\u00a0210\u00a0-\u00a0i*40,\u00a0210\u00a0-\u00a0i*40);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.stroke();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0useBeginPath();\r\n\u00a0\u00a0\u00a0\u00a0notUseBeginPath();\r\n&lt;\/script&gt;<\/div><\/pre>\n<p>\u5728 Context \u4e2d\u8def\u5f84\u6570\u8f83\u5c11\u65f6\uff0c\u5982\u679c\u4e0d\u8003\u8651\u663e\u793a\u6548\u679c\uff0c\u6027\u80fd\u4e0a\u8fd8\u53ef\u4ee5\u63a5\u53d7\uff0c\u4f46\u662f\u5982\u679c Context \u4e2d\u7684\u8def\u5f84\u6570\u5f88\u591a\u65f6\uff0c\u5728\u5f00\u59cb\u7ed8\u5236\u65b0\u8def\u5f84\u524d\u4e0d\u4f7f\u7528 beginPath \u7684\u8bdd\uff0c\u56e0\u4e3a\u6bcf\u6b21\u7ed8\u5236\u90fd\u8981\u5c06\u4e4b\u524d\u7684\u8def\u5f84\u91cd\u65b0\u7ed8\u5236\u4e00\u904d\uff0c\u8fd9\u65f6\u6027\u80fd\u4f1a\u4ee5\u6307\u6570\u4e0b\u964d\u3002<\/p>\n<p>\u56e0\u6b64\uff0c\u9664\u975e\u6709\u7279\u6b8a\u9700\u8981\uff0c\u6bcf\u6b21\u5f00\u59cb\u7ed8\u5236\u8def\u5f84\u524d\u90fd\u8981\u8c03\u7528 beginPath \u6765\u5f00\u59cb\u65b0\u8def\u5f84\u3002<!--more--><\/p>\n<p><strong>2.\u00a0\u79fb\u52a8\u4e0e\u76f4\u7ebf\u00a0moveTo,\u00a0lineTo,\u00a0rect<\/strong><\/p>\n<p><a style=\"color: #0066cc; text-decoration: none;\" rel=\"external\" href=\"http:\/\/picasaweb.google.com\/lh\/photo\/MsYuilHYYBv_yXthtSUbNQ?authkey=Gv1sRgCNOep9eIh-7m8QE&amp;feat=embedwebsite\"><img style=\"border: 0px initial initial;\" src=\"http:\/\/lh3.ggpht.com\/_QJK_LPJoebg\/Sf-tclWhJOI\/AAAAAAAAAn0\/UJMWF0V5gBA\/s800\/2-lineto-and-rect.jpg\" alt=\"\u56fe\u7247\u9644\u4ef6\" \/><\/a><\/p>\n<pre lang=\"html4strict\">&lt;canvas\u00a0id=\"canvas\"\u00a0width=\"500\"\u00a0height=\"500\"&gt;&lt;\/canvas&gt;\r\n&lt;script\u00a0type=\"text\/javascript\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0var\u00a0canvas\u00a0=\u00a0document.getElementById(\"canvas\");\r\n\u00a0\u00a0\u00a0\u00a0var\u00a0ctx\u00a0=\u00a0canvas.getContext(\"2d\");\r\n\u00a0\u00a0\u00a0\u00a0ctx.beginPath();\r\n\u00a0\u00a0\u00a0\u00a0ctx.moveTo(10,\u00a010);\r\n\u00a0\u00a0\u00a0\u00a0ctx.lineTo(110,110);\r\n\u00a0\u00a0\u00a0\u00a0ctx.lineTo(10,\u00a0110);\r\n\u00a0\u00a0\u00a0\u00a0ctx.lineTo(10,\u00a010);\r\n\u00a0\u00a0\u00a0\u00a0ctx.stroke();\r\n\u00a0\u00a0\u00a0\u00a0ctx.beginPath();\r\n\u00a0\u00a0\u00a0\u00a0ctx.rect(120,\u00a010,\u00a0100,\u00a0100);\r\n\u00a0\u00a0\u00a0\u00a0ctx.stroke();\r\n&lt;\/script&gt;<\/pre>\n<p><em>void moveTo(in float x, in float y);<\/em><\/p>\n<p>\u5728 Canvas \u4e2d\u7ed8\u5236\u8def\u5f84\uff0c\u4e00\u822c\u662f\u4e0d\u9700\u8981\u6307\u5b9a\u8d77\u70b9\u7684\uff0c\u9ed8\u8ba4\u7684\u8d77\u70b9\u5c31\u662f\u4e0a\u4e00\u6b21\u7ed8\u5236\u8def\u5f84\u7684\u7ec8\u70b9\uff0c\u56e0\u6b64\uff0c\u5982\u679c\u9700\u8981\u6307\u5b9a\u8d77\u70b9\u7684\u8bdd\uff0c\u5c31\u9700\u8981\u4f7f\u7528 moveTo \u65b9\u6cd5\u6765\u6307\u5b9a\u8981\u79fb\u52a8\u5230\u7684\u4f4d\u7f6e\u3002<\/p>\n<p><em>void lineTo(in float x, in float y);<\/em><\/p>\n<p>lineTo \u65b9\u6cd5\u5219\u662f\u7ed8\u5236\u4e00\u6761\u76f4\u63a5\u8def\u5f84\u5230\u6307\u5b9a\u7684\u4f4d\u7f6e\u3002\u5728\u8c03\u7528\u5b8c lineTo \u65b9\u6cd5\u540e\uff0cContext \u5185\u90e8\u7684\u7ed8\u5236\u8d77\u70b9\u4f1a\u79fb\u52a8\u5230\u76f4\u7ebf\u7684\u7ec8\u70b9\u3002<\/p>\n<p><em>void rect(in float x, in float y, in float w, in float h);<\/em><\/p>\n<p>rect \u65b9\u6cd5\u7528\u6765\u7ed8\u5236\u4e00\u4e2a\u77e9\u5f62\u8def\u5f84\uff0c\u901a\u8fc7\u53c2\u6570\u6307\u5b9a\u5de6\u4e0a\u89d2\u4f4d\u7f6e\u4ee5\u53ca\u5bbd\u548c\u9ad8\u3002\u5728\u8c03\u7528 rect \u540e\uff0cContext \u7684\u7ed8\u5236\u8d77\u70b9\u4f1a\u79fb\u52a8\u5230 rect \u7ed8\u5236\u7684\u77e9\u5f62\u7684\u5de6\u4e0a\u89d2\u3002<\/p>\n<p>rect \u65b9\u6cd5\u4e0e\u540e\u9762\u8981\u4ecb\u7ecd\u7684 arc \u65b9\u6cd5\u4e0e\u5176\u4ed6\u8def\u5f84\u65b9\u6cd5\u6709\u4e00\u70b9\u4e0d\u540c\uff0c\u5b83\u4eec\u662f\u4f7f\u7528\u53c2\u6570\u6307\u5b9a\u8d77\u70b9\u7684\uff0c\u800c\u4e0d\u662f\u4f7f\u7528 Context \u5185\u90e8\u7ef4\u62a4\u7684\u8d77\u70b9\u3002<\/p>\n<p><strong>3. \u66f2\u7ebf arcTo, arc, quadraticCurveTo, bezierCurveTo<\/strong><\/p>\n<p><em>void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);<\/em><\/p>\n<p>\u6309\u7167 WHATWG \u6587\u6863\u7684\u8bf4\u660e\uff0c\u8fd9\u4e2a\u65b9\u6cd5\u662f\u753b\u4e00\u4e2a\u4e0e\u4e24\u6761\u5c04\u7ebf\u76f8\u5207\u7684\u7684\u5706\u5f27\uff0c\u4e24\u6761\u5c04\u7ebf\u5176\u4e2d\u4e00\u6761\u4e3a\u7a7f\u8fc7 Context \u7ed8\u5236\u8d77\u70b9\uff0c\u7ec8\u70b9\u4e3a (x1, y1)\uff0c\u53e6\u5916\u4e00\u6761\u4e3a\u7a7f\u8fc7 (x2, y2)\uff0c\u7ec8\u70b9\u4e3a (x1, y1)\uff0c\u8fd9\u6761\u5706\u5f27\u4e3a\u6700\u5c0f\u7684\u4e0e\u8fd9\u4e24\u6761\u5c04\u7ebf\u76f8\u5207\u7684\u5706\u5f27\u3002\u5728\u8c03\u7528\u5b8c arcTo \u65b9\u6cd5\u540e\uff0c\u5c06 \u5706\u5f27\u4e0e \u5c04\u7ebf (x1, y1)-(x2, y2) \u7684\u5207\u70b9\u6dfb\u52a0\u5230\u5f53\u524d\u8def\u5f84\u4e2d\uff0c\u505a\u4e3a\u4e0b\u6b21\u7ed8\u5236\u7684\u8d77\u70b9\u3002<\/p>\n<p>\u5728\u6d4b\u8bd5\u4e2d\u53d1\u73b0\uff0cFirefox \u548c Opera \u76ee\u524d\u5bf9\u8fd9\u4e2a\u65b9\u6cd5\u7684\u652f\u6301\u5e76\u4e0d\u597d\uff0c\u53ea\u6709 Chrome \u548c Safari 4 \u80fd\u7ed8\u5236\u51fa\u6b63\u786e\u7684\u8def\u5f84\u3002<\/p>\n<p><span style=\"color: #333333; font-family: Corbel, \u5fae\u8f6f\u96c5\u9ed1, Verdana, Arial, sans-serif; line-height: 21px; font-size: 14px;\"><a style=\"color: #1f3a87; text-decoration: underline;\" rel=\"external\" href=\"http:\/\/picasaweb.google.com\/lh\/photo\/dY3xi0DiDK7SqVKMAJt4DQ?authkey=Gv1sRgCNOep9eIh-7m8QE&amp;feat=embedwebsite\"><img style=\"border: 0px initial initial;\" src=\"http:\/\/lh3.ggpht.com\/_QJK_LPJoebg\/Sf-1GoLlzMI\/AAAAAAAAAn8\/WUOHiqTwOCY\/s800\/2-arcto.jpg\" alt=\"\u56fe\u7247\u9644\u4ef6\" \/><\/a><\/span><\/p>\n<p>\u56fe\u4e2d\u7684\u7684\u4e24\u6761\u7070\u8272\u76f4\u7ebf\u662f\u504f\u79fb 4 \u4e2a\u50cf\u7d20\u540e\u7684\u4e24\u6761\u5c04\u7ebf\u6240\u5728\u7684\u4f4d\u7f6e\u3002<\/p>\n<pre lang=\"html4strict\">&lt;canvas\u00a0id=\"canvas\"\u00a0width=\"500\"\u00a0height=\"500\"&gt;&lt;\/canvas&gt;\r\n&lt;script\u00a0type=\"text\/javascript\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0var\u00a0canvas\u00a0=\u00a0document.getElementById(\"canvas\");\r\n\u00a0\u00a0\u00a0\u00a0var\u00a0ctx\u00a0=\u00a0canvas.getContext(\"2d\");\r\n\u00a0\u00a0\u00a0\u00a0ctx.beginPath();\r\n\u00a0\u00a0\u00a0\u00a0ctx.strokeStyle\u00a0=\u00a0\"#000\";\r\n\u00a0\u00a0\u00a0\u00a0ctx.translate(200,\u00a0200);\r\n\u00a0\u00a0\u00a0\u00a0ctx.moveTo(10,\u00a010);\r\n\u00a0\u00a0\u00a0\u00a0ctx.arcTo(110,\u00a060,\u00a010,\u00a0110,\u00a030);\r\n\u00a0\u00a0\u00a0\u00a0ctx.stroke();\r\n\r\n\u00a0\u00a0\u00a0\u00a0ctx.beginPath();\r\n\u00a0\u00a0\u00a0\u00a0ctx.strokeStyle\u00a0=\u00a0\"#999\";\r\n\u00a0\u00a0\u00a0\u00a0ctx.moveTo(10,\u00a06);\r\n\u00a0\u00a0\u00a0\u00a0ctx.lineTo(114,\u00a060);\r\n\u00a0\u00a0\u00a0\u00a0ctx.lineTo(10,\u00a0114);\r\n\u00a0\u00a0\u00a0\u00a0ctx.stroke();\r\n&lt;\/script&gt;<\/pre>\n<p><em>void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);<\/em><\/p>\n<p>arc \u65b9\u6cd5\u7528\u6765\u7ed8\u5236\u4e00\u6bb5\u5706\u5f27\u8def\u5f84\uff0c\u901a\u8fc7\u5706\u5fc3\u4f4d\u7f6e\u3001\u8d77\u59cb\u5f27\u5ea6\u3001\u7ec8\u6b62\u5f27\u5ea6\u6765\u6307\u5b9a\u5706\u5f27\u7684\u4f4d\u7f6e\u548c\u5927\u5c0f\uff0c\u8fd9\u4e2a\u65b9\u6cd5\u4e5f\u4e0d\u4f9d\u8d56\u4e8e Context \u7ef4\u62a4\u7684\u7ed8\u5236\u8d77\u70b9\u3002\u800c\u5728\u753b\u5706\u5f27\u65f6\u7684\u65cb\u8f6c\u65b9\u5411\u5219\u7531\u6700\u540e\u4e00\u4e2a\u53c2\u6570 anticlockwise \u6765\u6307\u5b9a\uff0c\u5982\u679c\u4e3a true \u5c31\u662f\u9006\u65f6\u9488\uff0cfalse \u5219\u4e3a\u987a\u65f6\u9488\u3002<\/p>\n<p><em>void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);<\/em><\/p>\n<p>quadraticCurveTo \u65b9\u6cd5\u7528\u6765\u7ed8\u5236\u4e8c\u6b21\u6837\u6761\u66f2\u7ebf\u8def\u5f84\uff0c\u53c2\u6570\u4e2d cpx \u4e0e cpy \u6307\u5b9a\u63a7\u5236\u70b9\u7684\u4f4d\u7f6e\uff0cx \u548c y \u6307\u5b9a\u7ec8\u70b9\u7684\u4f4d\u7f6e\uff0c\u8d77\u70b9\u5219\u662f\u7531 Context \u7ef4\u62a4\u7684\u7ed8\u5236\u8d77\u70b9\u3002<\/p>\n<p><em>void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);<\/em><\/p>\n<p>bezierCurveTo \u65b9\u6cd5\u7528\u6765\u7ed8\u5236\u8d1d\u585e\u5c14\u66f2\u7ebf\u8def\u5f84\uff0c\u5b83\u4e0e quadraticCurveTo \u76f8\u4f3c\uff0c\u4e0d\u8fc7\u8d1d\u585e\u5c14\u66f2\u7ebf\u6709\u4e24\u4e2a\u63a7\u5236\u70b9\uff0c\u56e0\u6b64\u53c2\u6570\u4e2d\u7684 cp1x, cp1y, cp2x, cp2y \u7528\u6765\u6307\u5b9a\u4e24\u4e2a\u63a7\u5236\u70b9\u7684\u4f4d\u7f6e\uff0c\u800c x \u548c y \u6307\u5b9a\u7efa\u7684\u4f4d\u7f6e\u3002<\/p>\n<p><span style=\"color: #333333; font-family: Corbel, \u5fae\u8f6f\u96c5\u9ed1, Verdana, Arial, sans-serif; line-height: 21px; font-size: 14px;\"><a style=\"color: #1f3a87; text-decoration: underline;\" rel=\"external\" href=\"http:\/\/picasaweb.google.com\/lh\/photo\/pZwPp7mDBZo2lAtZwUZ57g?authkey=Gv1sRgCNOep9eIh-7m8QE&amp;feat=embedwebsite\"><img style=\"border: 0px initial initial;\" src=\"http:\/\/lh3.ggpht.com\/_QJK_LPJoebg\/Sf-6u7OYoaI\/AAAAAAAAAoc\/M_jVRyAwvHg\/s800\/2-arc-and-curve.jpg\" alt=\"\u56fe\u7247\u9644\u4ef6\" \/><\/a><\/span><\/p>\n<pre lang=\"html4strict\">&lt;canvas\u00a0id=\"canvas\"\u00a0width=\"500\"\u00a0height=\"500\"&gt;&lt;\/canvas&gt;\r\n&lt;script\u00a0type=\"text\/javascript\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0var\u00a0canvas\u00a0=\u00a0document.getElementById(\"canvas\");\r\n\u00a0\u00a0\u00a0\u00a0var\u00a0ctx\u00a0=\u00a0canvas.getContext(\"2d\");\r\n\u00a0\u00a0\u00a0\u00a0ctx.translate(10,\u00a010);\r\n\u00a0\u00a0\u00a0\u00a0ctx.beginPath();\r\n\u00a0\u00a0\u00a0\u00a0ctx.arc(50,\u00a050,\u00a050,\u00a00,\u00a0Math.PI,\u00a0true);\r\n\u00a0\u00a0\u00a0\u00a0ctx.stroke();\r\n\u00a0\u00a0\u00a0\u00a0\/\/\u00a0quadraticCurveTo\r\n\u00a0\u00a0\u00a0\u00a0ctx.beginPath();\r\n\u00a0\u00a0\u00a0\u00a0ctx.strokeStyle\u00a0=\u00a0\"#000\";\r\n\u00a0\u00a0\u00a0\u00a0ctx.moveTo(110,\u00a050);\r\n\u00a0\u00a0\u00a0\u00a0ctx.quadraticCurveTo(160,\u00a00,\u00a0210,\u00a050);\r\n\u00a0\u00a0\u00a0\u00a0ctx.stroke();\r\n\u00a0\u00a0\u00a0\u00a0ctx.beginPath();\r\n\u00a0\u00a0\u00a0\u00a0ctx.strokeStyle\u00a0=\u00a0\"red\";\r\n\u00a0\u00a0\u00a0\u00a0ctx.moveTo(110,\u00a050);\r\n\u00a0\u00a0\u00a0\u00a0ctx.lineTo(160,\u00a00);\r\n\u00a0\u00a0\u00a0\u00a0ctx.lineTo(210,\u00a050);\r\n\u00a0\u00a0\u00a0\u00a0ctx.stroke();\r\n\u00a0\u00a0\u00a0\u00a0\/\/\u00a0bezierCurveTo\r\n\u00a0\u00a0\u00a0\u00a0ctx.beginPath();\r\n\u00a0\u00a0\u00a0\u00a0ctx.strokeStyle\u00a0=\u00a0\"#000\";\r\n\u00a0\u00a0\u00a0\u00a0ctx.moveTo(220,\u00a050);\r\n\u00a0\u00a0\u00a0\u00a0ctx.bezierCurveTo(250,\u00a00,\u00a0280,\u00a010,\u00a0320,\u00a050);\r\n\u00a0\u00a0\u00a0\u00a0ctx.stroke();\r\n\u00a0\u00a0\u00a0\u00a0ctx.beginPath();\r\n\u00a0\u00a0\u00a0\u00a0ctx.strokeStyle\u00a0=\u00a0\"red\";\r\n\u00a0\u00a0\u00a0\u00a0ctx.moveTo(220,\u00a050);\r\n\u00a0\u00a0\u00a0\u00a0ctx.lineTo(250,\u00a00);\r\n\u00a0\u00a0\u00a0\u00a0ctx.lineTo(280,\u00a010);\r\n\u00a0\u00a0\u00a0\u00a0ctx.lineTo(320,\u00a050);\r\n\u00a0\u00a0\u00a0\u00a0ctx.stroke();\r\n&lt;\/script&gt;<\/pre>\n<p><strong>4. fill, stroke, clip<\/strong><\/p>\n<p>fill \u4e0e stroke \u8fd9\u4e24\u4e2a\u65b9\u6cd5\u5f88\u597d\u7406\u89e3\uff0c\u5206\u522b\u7528\u6765\u586b\u5145\u8def\u5f84\u4e0e\u7ed8\u5236\u8def\u5f84\u7ebf\u6761\u3002<\/p>\n<p>clip \u65b9\u6cd5\u7528\u6765\u7ed9 Canvas \u8bbe\u7f6e\u4e00\u4e2a\u526a\u8f91\u533a\u57df\uff0c\u5728\u8c03\u7528 clip \u65b9\u6cd5\u4e4b\u540e\u7684\u4ee3\u7801\u53ea\u5bf9\u8fd9\u4e2a\u8bbe\u5b9a\u7684\u526a\u8f91\u533a\u57df\u6709\u6548\uff0c\u4e0d\u4f1a\u5f71\u54cd\u5176\u4ed6\u5730\u65b9\uff0c\u8fd9\u4e2a\u65b9\u6cd5\u5728\u8981\u8fdb\u884c\u5c40\u90e8\u66f4\u65b0\u65f6\u5f88\u6709\u7528\u3002\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u526a\u8f91\u533a\u57df\u662f\u4e00\u4e2a\u5de6\u4e0a\u89d2\u5728 (0, 0)\uff0c\u5bbd\u548c\u9ad8\u5206\u522b\u7b49\u4e8e Canvas \u5143\u7d20\u7684\u5bbd\u548c\u9ad8\u7684\u77e9\u5f62\u3002<\/p>\n<p><span style=\"color: #333333; font-family: Corbel, \u5fae\u8f6f\u96c5\u9ed1, Verdana, Arial, sans-serif; line-height: 21px; font-size: 14px;\"><a style=\"color: #0066cc; text-decoration: none;\" rel=\"external\" href=\"http:\/\/picasaweb.google.com\/lh\/photo\/Y2-uHyM7J9eRhqXOUFUo3A?authkey=Gv1sRgCNOep9eIh-7m8QE&amp;feat=embedwebsite\"><img style=\"border: 0px initial initial;\" src=\"http:\/\/lh4.ggpht.com\/_QJK_LPJoebg\/Sf_CkLgc9II\/AAAAAAAAAo8\/Z83QRc4uBgA\/s800\/2-clip.jpg\" alt=\"\u56fe\u7247\u9644\u4ef6\" \/><\/a><\/span><\/p>\n<p>\u5728\u753b\u8fd9\u4e2a\u56fe\u65f6\uff0c\u867d\u7136\u4e24\u6b21\u90fd\u662f\u4f7f\u7528\u00a0fillRect(0,\u00a00,\u00a0100,\u00a0100)\u00a0\u586b\u5145\u4e86\u4e00\u4e2a\u00a0100x100\u00a0\u5927\u5c0f\u77e9\u5f62\uff0c\u4f46\u662f\u663e\u793a\u7684\u7ed3\u679c\u5374\u662f\u7b2c\u4e8c\u6b21\u586b\u5145\u7684\u53ea\u662f\u4e2d\u95f4\u7684\u4e00\u5c0f\u5757\uff0c\u8fd9\u662f\u56e0\u4e3a\u5728\u4e24\u6b21\u586b\u5145\u4e4b\u95f4\u4f7f\u7528\u00a0clip\u00a0\u65b9\u6cd5\u8bbe\u5b9a\u4e86\u526a\u8f91\u533a\u57df\uff0c\u8fd9\u6837\u7b2c\u4e8c\u6b21\u586b\u5145\u65f6\u53ea\u4f1a\u5f71\u54cd\u5230\u6240\u8bbe\u5b9a\u7684\u4e2d\u95f4\u90a3\u4e00\u5c0f\u90e8\u5206\u533a\u57df\u3002<\/p>\n<pre lang=\"html4strict\">&lt;canvas\u00a0id=\"canvas\"\u00a0width=\"500\"\u00a0height=\"500\"&gt;&lt;\/canvas&gt;\r\n&lt;script\u00a0type=\"text\/javascript\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0var\u00a0canvas\u00a0=\u00a0document.getElementById(\"canvas\");\r\n\u00a0\u00a0\u00a0\u00a0var\u00a0ctx\u00a0=\u00a0canvas.getContext(\"2d\");\r\n\u00a0\u00a0\u00a0\u00a0ctx.translate(10,\u00a010);\r\n\u00a0\u00a0\u00a0\u00a0\/\/\u00a0fill\u00a0a\u00a0green\u00a0rectangle\r\n\u00a0\u00a0\u00a0\u00a0ctx.fillStyle\u00a0=\u00a0\"green\";\r\n\u00a0\u00a0\u00a0\u00a0ctx.fillRect(0,\u00a00,\u00a0100,\u00a0100);\r\n\u00a0\u00a0\u00a0\u00a0\/\/\u00a0set\u00a0the\u00a0clipping\u00a0region\r\n\u00a0\u00a0\u00a0\u00a0ctx.beginPath();\r\n\u00a0\u00a0\u00a0\u00a0ctx.rect(30,\u00a030,\u00a040,\u00a040);\r\n\u00a0\u00a0\u00a0\u00a0ctx.clip();\r\n\u00a0\u00a0\u00a0\u00a0ctx.stroke();\r\n\u00a0\u00a0\u00a0\u00a0\/\/\u00a0fill\u00a0a\u00a0yellow\u00a0rectangle\r\n\u00a0\u00a0\u00a0\u00a0ctx.fillStyle\u00a0=\u00a0\"yellow\";\r\n\u00a0\u00a0\u00a0\u00a0ctx.fillRect(0,\u00a00,\u00a0100,\u00a0100);\r\n&lt;\/script&gt;<\/pre>\n<p><strong>5. clearRect, fillRect, strokeRect<\/strong><\/p>\n<p>\u8fd9\u4e09\u4e2a\u65b9\u6cd5\u5e76\u4e0d\u662f\u8def\u5f84\u65b9\u6cd5\uff0c\u800c\u662f\u7528\u6765\u76f4\u63a5\u5904\u7406 Canvas \u4e0a\u7684\u5185\u5bb9\uff0c\u76f8\u5f53\u4e8e Canvas \u7684\u80cc\u666f\uff0c\u8c03\u7528\u8fd9\u4e09\u4e2a\u65b9\u6cd5\u4e5f\u4e0d\u4f1a\u5f71\u54cd Context \u7ed8\u56fe\u7684\u8d77\u70b9\u3002<\/p>\n<p>\u8981\u6e05\u9664 Canvas \u4e0a\u7684\u6240\u6709\u5185\u5bb9\u65f6\uff0c\u53ef\u4ee5\u76f4\u63a5\u8c03\u7528 context.clearRect(0, 0, width, height) \u6765\u76f4\u63a5\u6e05\u9664\uff0c\u800c\u4e0d\u9700\u8981\u4f7f\u7528\u8def\u5f84\u65b9\u6cd5\u7ed8\u5236\u4e00\u4e2a\u4e0e Canvas \u540c\u7b49\u5927\u5c0f\u7684\u77e9\u5f62\u8def\u5f84\u518d\u4f7f\u7528 fill \u65b9\u6cd5\u53bb\u6e05\u9664\u3002<\/p>\n<p><strong>\u7ed3\u8bed<\/strong><\/p>\n<p>\u901a\u8fc7 Canvas \u7684\u8def\u5f84\u65b9\u6cd5\uff0c\u53ef\u4ee5\u4f7f\u7528 Canvas \u5904\u7406\u4e00\u4e9b\u7b80\u5355\u7684\u77e2\u91cf\u56fe\u5f62\uff0c\u8fd9\u6837\u5728\u7f29\u653e\u65f6\u4e5f\u4e0d\u4f1a\u5931\u771f\u3002\u4e0d\u8fc7 Canvas \u7684\u8def\u5f84\u65b9\u6cd5\u4e5f\u4e0d\u662f\u5f88\u5f3a\u5927\uff0c\u81f3\u5c11\u8fde\u4e2a\u692d\u5706\u7684\u8def\u5f84\u90fd\u6ca1\u6709\u2026\u2026<\/p>\n<p>\u8fd9\u7bc7\u5199\u5f97\u6709\u70b9\u957f\u4e86\uff0cCnavas \u4e2d\u8def\u5f84\u76f8\u5173\u7684\u5185\u5bb9\u5c31\u5199\u8fd9\u4e48\u591a\uff0c\u540e\u9762\u518d\u8bb2\u8bb2 Canvas \u5176\u4ed6\u7684\u4e1c\u897f\u3002<\/p>\n<p><strong>\u53c2\u8003\u8d44\u6599<\/strong><\/p>\n<ol>\n<li><a rel=\"external\" href=\"http:\/\/www.whatwg.org\/specs\/web-apps\/current-work\/multipage\/the-canvas-element.html#the-canvas-element\">The\u00a0Canvas\u00a0Element,\u00a0WHATWG<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>\u4e0a\u4e00\u7bc7\u4ecb\u7ecd\u4e86\u00a0HTML5\u00a0\u4e2d\u00a0Canvas\u00a0\u7684\u57fa\u672c\u6982\u5ff5\uff0c\u8fd9\u7bc7\u5c06\u8981\u4ecb\u7ecd\u4e00\u4e0b\u00a0Can &hellip;<\/p>\n<p class=\"read-more\"><a href=\"https:\/\/xujiwei.com\/blog\/2009\/05\/canvas-starts-part2\/\">\u7ee7\u7eed\u9605\u8bfb &raquo;<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[44,46,45],"_links":{"self":[{"href":"https:\/\/xujiwei.com\/blog\/wp-json\/wp\/v2\/posts\/80"}],"collection":[{"href":"https:\/\/xujiwei.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xujiwei.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xujiwei.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/xujiwei.com\/blog\/wp-json\/wp\/v2\/comments?post=80"}],"version-history":[{"count":0,"href":"https:\/\/xujiwei.com\/blog\/wp-json\/wp\/v2\/posts\/80\/revisions"}],"wp:attachment":[{"href":"https:\/\/xujiwei.com\/blog\/wp-json\/wp\/v2\/media?parent=80"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xujiwei.com\/blog\/wp-json\/wp\/v2\/categories?post=80"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xujiwei.com\/blog\/wp-json\/wp\/v2\/tags?post=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}